伪类选择器和伪元素选择器

我们再讲选择器权重的时候提到了类选择器和伪类选择器权重是一样的那么今天我们就拿出来伪类选择器和伪元素选择器单独讲一下：

伪类选择器：
伪类选择器很简单的理解就是在某种特殊的状态下的样式，比如说“点击链接”这个状态下的样式。比如说“鼠标划过”这个状态下的样式。主流的伪类选择器有5种
link 超链接点击之前
visited 链接被访问过之后
以上两种样式，只能用于超链接。
动态伪类：针对所有标签都适用的样式。如下：
hover “悬停”：鼠标放到标签上的时候
active “激活”：鼠标点击标签，但是不松手时。
focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
别逼逼看代码：

当鼠标划过的时候 大家可以写一下代码试一下，更直观一些

伪元素选择器：
伪元素选择器使用后的效果是在不用伪元素选择器的情况下得通过创造一个新的的元素（标签）才能做到
主要的伪元素选择器有以下几种：
为某个元素的第一行文字使用样式。
:first-line
为某个元素中的文字的首字母或第一个字使用样式。
:first-letter
在某个元素之前插入一些内容。
:before
在某个元素之后插入一些内容。
:after
别逼逼看代码
如果现在还对我的伪元素的定义不理解的话，想一想我们不用伪元素的话，什么样的方法可以实现上述效果

伪类选择器和伪元素选择器相关推荐

CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
CSS伪类(Pseudo-classes)、伪元素、伪类选择器
CSS伪类(Pseudo-classes)和伪元素(详细) 那什么是伪类? 伪类是添加到选择器上的关键字,指定元素的特殊状态,伪类可以根据内容的状态来应用不同的样式: 伪类选择元素基于的是当前元素处于 ...
HTML相玲选择器,CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
【结构伪类和否定伪类】
结构伪类总结用题目的形式,来了解常见伪类结构. 结构伪类 1.表示修改前4个元素的样式为字体大小为20px /* 前几个 */div > div:nth-child(-n + 4) {font ...
js后代选择器_后代选择器和子元素选择器的区别
原文简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...
html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别
今天在看css基础的时候,发现了一个很有趣的事情,那就是后代选择器与子元素选择器. 说来也惭愧,我以前一直以为,这俩是同一个东西,只是叫法不同而已,后来才发现,原来这俩是两个不同的东西. 后代选 ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-子元素选择器
小程序中的WXSS(css)选择器课程-子元素选择器微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhu ...
html5子代选择器,伪类、子代、毗邻选择器 — IE6已逝，这些优秀的选择器你怎能不用？...
那些被遗忘的选择器在IE6~8"统治"网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍弃.而今,IE6已逝 ...
css3伪类图解,CSS3伪类元素详解/深入浅出
很多朋友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和C ...

伪类选择器和伪元素选择器

伪类选择器和伪元素选择器相关推荐

最新文章

热门文章