1.伪类:伪类用于某些选择器添加特殊的效果
超链接伪类
给a链接添加 几种状态:
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
元素获取
伪元素不是真正的元素,不存在与文档之中,所以js无法对它进行操作。为什么叫它“元素”?因为我们可以对其进行跟元素几乎无差别的操作。
:first-child /* 第一个子元素 */
:last-child /* 最后一个子元素 */
:only-child /* 只有一个子元素 */
:root /* 根标签 */
:nth-child(n) /* 第几个子元素 */
ul li:nth-child(1){color:#f00;} /* 第一个子元素 - 从1开始 */
ul li:nth-child(2n){color:#f00;} /* 偶数行的子元素 - 2的倍数的所有元素 */
:nth-child(odd) /* 奇数元素 */
:nth-child(even) /* 偶数元素 */
:nth-last-child(-n+4) /* 后4个元素 */
2.伪元素:CSS伪元素是用来添加一些选择器的特殊效果。最好使用双冒号,防止与伪类混淆
first-letter首字母
first-letter伪元素用于向文本的首字母设置特殊样式:
p::first-letter {color: red;}
其他常见的伪元素选择器
::first-line 首行
::first-letter 首字母
::before 元素前插入
::after 元素后插入
3.伪类与伪元素的区别
如果想要给第一项添加样式,可以在为第一个
- 添加一个类,并在该类中定义对应样式
如果不用添加类的方法,我们可以通过给设置第一个
- 的:first-child伪类来为其添加样式。这个时候,被修饰的
- 元素依然处于文档树中。
如果想要给该段落的第一个字添加样式,可以在第一个字中包裹一个元素,并设置该span元素的样式 如果不创建一个元素,我们可以通过设置 的::first-letter伪元素来为其添加样式。这个时候,看起来好像是创建了一个虚拟的元素并添加了样式,但实际上文档树中并不存在这个元素。
伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。
CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类,比如::before和::after等伪元素使用双冒号(::),:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外,大部分浏览器都支持伪元素的双冒号(::)表示方法。 除了少部分伪元素,如::backdrop必须使用双冒号,大部分伪元素都支持单冒号和双冒号的写法,比如::after,写成:after也可以正确运行。 建议使用双冒号的写法,更容易识别出是伪类还是伪元素。