第六篇 伪类选择器之伪类选择器介绍与结构性伪类

173 阅读5分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第5天,点击查看活动详情

伪类选择器介绍

伪类选择器的开头有一个冒号,这种选择器可以为文档中不一定存在的结构、元素设定样式,或是为某些元素的特定状态赋予幽灵类。

伪类选择器的拼接

css允许多个伪类选择器同时使用。写法就是每个伪类选择器紧挨着写即可,但是若是两个互相冲突的伪类被拼接在一起,那么选择器不会选中任何一个元素。

示例:a:link:hover其中:link:hover就是伪类选择器。

伪类统一用法

选择器:伪类选择器 此时伪类选择器是为它前面的选择器所选中的元素或是元素的某个状态去添加幽灵类,而不是他的后代元素。

结构伪类

选择根元素:root

:root,该伪类表示选中文档的根元素,在HTML中,根元素永远是<html>

与直接使用html选择器的区别是:root与前者的特指度不同。

一般单独使用该伪类,不将该伪类依附于某一个选择器。

选择空元素:empty

:empty可以选择没有任何子代包括内部文本的元素。此时单标签元素或是开闭标签必须紧挨一起的结构性元素才可被选中。【中间连空白符也不能有】

不过开闭标签中可以有注释,因为注释在解析时浏览器是直接忽略掉的。

除了:empty剩余伪类完全忽略文本节点

如题目所述,只有:empty会在意文本,剩余的伪类在匹配时,会将文本完全忽略,文本不会影响到其他伪类的匹配。

选择唯一子代:only-child

:only-child选中的元素是另一个元素的唯一子元素。

例如: p a:only-child会选中<p><a href="test.html">test</a></p>中的a

选择唯一指定子代:only-of-type

选择器1:only-of-type若是父节点下有多个节点,但是在子节点中 选择器1中指定的标签类型的节点 只有一个时,选中那个子节点。

only-child的区别是:

  • :only-of-type允许父节点有多个节点,而:only-child不允许。
  • :only-of-type绝对不会选中文本节点,而:only-child可能会。

注意与示例

选择器1:only-of-type的唯一性是针对元素类型的,而不是针对选择器1选中的元素个数的。

你可以看作浏览器将同胞元素中按元素类型分组,每组的第一个元素节点才有可能被选中。

例如:

<div>
    <p class="unique">1111</p>
    <p>2222</p>
    <span class="unique">sss</span>
</div>

p.unique:only-of-type不会选中上述HTML中的任何一个p,因为虽然p.unique可以选中的元素在div的子节点中只有一个,但是:only-of-type看的是你有几个p元素,所以不会选中任何一个节点。

但是将p.unique:only-of-type中的p改为span那么就可以选中span节点。

选择第一个和最后一个子代

选择第一个子代:first-child

:first-child选中的元素为另一个元素的第一个子节点。注意不是第一个指定元素的节点,只有当元素为第一个子节点时,才有可能被选中。

例如: <div><p>第一个元素</p> <a>第二个元素</a></div> a:first-child { color: red; } p:first-child { color: red; }在上述代码中只会选中p,a的字体不会变红。

选择最后一个子代:last-child

:first-child类似,区别是,他只会选择最后一个子节点。

选择第一个和最后一个某种元素

选择第一个某种元素:first-of-type

选择器1:first-of-type选中的元素为另一个元素中的某个指定元素类型的第一个元素。

该伪类类似于:only-type-of,选中的元素与伪类沾粘的前面的选择器中的元素选择器有关。

例如:

<p>
    文本1
    <span class="t">
        文本2
    </span>
    <span class="t1">
        文本3
    </span>
</p>
span.t:first-of-type {
    color: blue;
}
span.t1:first-of-type {
    color: palevioletred;
}

上述代码中t标记的文本2会变蓝,剩余文本不会改变。因为文本2才是第一个span元素。

选择最后一个某种元素:last-type-of

:last-type-of:first-of-type类似,唯一的区别是,前者选中的是最后一个指定元素类型的节点。

选择每第n个元素:nth-child(an + b)与选择倒数第n个元素:nth-last-child(an + b)

:nth-child(an + b)

:nth-child(an + b)可以匹配到第a * n + b个元素,其中n=0,1,2,3...,a与b都是整数。而且an + b中的 an 必须写在b前面。

可以不写an或不写b。an + b可以写成an - b。

:nth-child(an + b)括号中也可以写evenodd,来分别表示 2n 或 2n + 1。

:nth-last-child(an + b)

:nth-child(an + b)类似,只不过是从后往前选择。

选择每第n个指定元素类型的元素:nth-of-type(an + b)选择每倒数第n个指定元素类型的元素:nth-last-of-type(an + b)

:nth-of-type(an + b):nth-child(an + b)以及:nth-last-of-type(an + b):nth-last-child(an + b)的关系 与 :first=child:first-of-type的关系类似。

选择器x:nth-of-type(an + b)的作用是选择满足选择器x,且第an+b个元素类型为选择器x中指定的元素类型【若是没有指定元素类型,则表明任何元素类型都可以】的元素。

:nth-last-of-type(an + b)选中的元素和:nth-of-type(an + b)类似,但是是从后往前选。