CSS-Pseudo-Selektor-Lernen, Pseudoklassen-Selektor-Analyse

:first-of-type与:last-of-type

:first-of-type伪类和:last-of-type伪类一个用于定位一组元素中的第一个兄弟元素，一个用来定位最后一个。

如下示例代码展示了:first-of-type伪类和:last-of-type伪类的用法：

HTML结构如下：

狐妖小红娘
 
涂山红红
 
涂山苏苏

CSS代码如下：

p:first-of-type { color: red; } p:last-of-type { color: blue; }

代码运行结果如下图所示：

:first-of-type伪类与:last-of-type伪类的用法一定要和:first-child伪类与:last-child伪类的用法区分开。以:first-of-type伪类和:first-child伪类为例来说明：

• :first-of-type伪类是定位一组同类型的兄弟元素中的第一个元素，不管这个元素在兄弟元素中的位置如何。

• :first-child伪类是定位一组兄弟元素中的第一个元素，这些兄弟元素不一定是同类型的。

如果将上述示例代码中的:first-of-type伪类改写为:first-child伪类的话，将不会生效。

:nth-child(n)与:nth-last-child(n)

:nth-child(n)伪类和:nth-last-child(n)伪类都是CSS3中新增的选择器，这两个选择器的用法基本上是一致的。区别在于:nth-last-child(n)伪类是倒序方式定位元素，也就是说，:nth-last-child(n)伪类是从一组元素的结尾开始的。

接下来，主要以:nth-child(n)伪类为例进行讲解。:nth-child(n)伪类中的n参数的含义具有3种情况：

• 数字值：任意一个大于 0 的正整数。例如#example td:nth-child(1)表示定位ID为example的父元素下所有

关键字：odd表示奇数，等同于:nth-child(2n)；even表示偶数，等同于:nth-child(2n+1)。

格式为(an+b)公式：a表示周期的长度（步长），n表示计数器（从 0 开始），而b则表示偏移值。

如下示例代码展示了:nth-child(n)伪类(实现表格隔行换色效果)的用法：

nbsp;html>     

代码运行结果如下图所示：

:nth-child(n)伪类的n参数用法中比较复杂的是使用(an+b)公式用法，如下示例列举了一些公式用法：

• :nth-child(5n)：定位元素的序号是5[=5×1]、10[=5×2]、15[=5×3]等。

• :nth-child(3n+4)：定位元素的序号是4[=(3×0)+4]、7[=(3×1)+4]、10[=(3×2)+4]、13[=(3×3)+4] 等。

• :nth-child(-n+3)：定位元素的序号是3[=-0+3]、2[=-1+3]、1[=-2+3]。

:nth-child(n)伪类与:nth-last-child(n)伪类和:nth-of-type(n)伪类与:nth-last-of-type(n)伪类的区别，类似于:first-of-type伪类与:last-of-type伪类和:first-child伪类与:last-child伪类的区别。

:empty

:empty伪类是用来定位没有任何子级元素或文本内容的元素，其中文本内容包含了空白。但是HTML的注释是不影响:empty伪类定位元素的。

如下示例代码展示了:empty伪类的用法：

nbsp;html>      
 
这个元素的背景是粉色的
 
  

代码运行结果如下图所示：

:root

CSS中的:root伪类选择器比较简单，它代表的就是元素。

如下代码展示的:root伪类的用法：

:root { height: 100vh; width: 100vw; background-color: dodgerblue; }

代码运行结果如下图所示：

3、UI元素状态伪类选择器

使用UI伪类选择器可以根据元素的状态匹配元素，下方列表将简单总结这类选择器：

4、输入伪类选择器

关于表单输入的伪类，主要介绍三种常用的，具体如下：

• :enabled和:disabled

• :read-only和:read-write

• :checked

:enabled和:disabled

:enabled和:disabled一这组伪类选择器分别表示禁用状态与可用状态，这组为了使完全对立的。

:enabled伪类的实际用处并不大，因为大多元素默认都是可用的，所以写不写意义并不大。

如下代码展示了:enabled和:disabled的用法：

nbsp;html>       

代码运行结果如下所示：

由上图我们看到禁用状态的的背景颜色为灰色。

:read-only和:read-write

:read-only和:read-write一这组伪类选择器分别表示只读和可写状态，同样的:read-write也很鸡肋，因为默认就是可读写，示例代码如下所示：

nbsp;html>       

代码运行结果如下所示：

我们可以看到，只读的的文字颜色为红色。

:checked

:checked伪类可以说是众多伪类选择器中使用频率很高的一个伪类选择器，该选择器表示选中的状态，就比如下面这个例子：

nbsp;html>       

关于:checked伪类，最佳实践是配合元素来实现，现在我们就通过:checked和元素来实现一个开关的效果。

示例代码如下：

nbsp;html>                 

运行效果如下所示：

5、逻辑组合伪类

:not()否定的伪类

• 优先级为0，优先级由括号中的表达式决定；:not(p)由p决定

• 可以不断的级联；
  input:not(:disabled):not(:read-only) {};表示处于不禁用，也不处于只读的状态

• 不可出现多个表达式，也不支持选择符；
  li:not(li, od); 尚未支持

:not()的巨大的用处在于告别重置的问题；

重置web中的样式，就好比我们在项目中经常使用到的：添加.active类名来控制样式的显示与隐藏/改变样式，往常的写法都是：

.cs_li { display: none; } .cs_li.active { display: block; }

而我们可以使用:not()伪类，可以更好的实现：

.cs_li:not(.active) { display: none; }

在列表中的设置

.cs_li:not(:nth-of-type(5n)){ margin-right: 10px; // 除5的倍数项都设置右边的外边距 }

:is()的作用是简化选择器

平时我们开发中经常会用到类似下面的语法：

.cs_li_a > img, .cs_li_b > img, .cs_li_c > img { display: none; }

使用:is()简化可写成：

:is(.cs_li_a, .cs_li_b, .cs_li_c) > img { display: none; }

还有一种嵌套之间的关系，相互嵌套，交叉组合得出结论；如下方所示

ol ol li, ol ul li, ul ul li, ul ol li { margin-left: 20px; }

使用:is()伪类强化，则只需要几行代码：

:is(ol, ul) :is(ol, ul) li{ margin-left: 20px; }

:where()

:where()与上方的:is()相同，唯一不同的是级别永远为0，也不受括号里面的表达式影响；

使用的方法与:is()完全相同，但优先级永远是0；底下的括号中的优先级完全被忽略，俩句是同一个优先级，并且级别等同于.conten选择器

:where(.article, section) .conten {} :where(#article, #section) .conten {

（学习视频分享：web前端入门）