00伪类选择符-魔芋的理解

Posted 2020-11-04 魔芋铃

【00】魔芋的理解

nth-child(n)这样的带n的，n从1开始。

n可以是表达式：n*3，n+3

可以是特殊字符串“odd”,"even"

【02】empty

匹配没有任何子元素（包括text节点）的元素E。

注意：如果开始标签和结束标签间有空格或是换行，都是属于有元素的。（魔芋：所以不实用）

---

【04】not(s)

匹配不含有s选择符的元素E。

---

【05】first-child

E:first-child

E:first-child { sRules }

用法比较奇怪：

1，是父元素的第一个子元素。

2，用在子元素上。

ul li:first-child {} //选择的是li。

3，li必须是所有兄弟节点中的第一个元素。

那么,li前面有个p兄弟节点，就会失效。

---

【06】last-child

同first-child。不过，是最后一个。

---

【07】first-of-type

E:first-of-type { sRules }

【】同类型中，选择第一个。

【】用在子元素上。

【】也就是说，被选元素可以不是父元素的第一个子元素。

用法：li:first-of-type {}

---

【08】last-of-type

同first-of-type

---

【09】nth-child(n)

【】用在子元素上，并且，它的n是按照父元素的所有子元素来排序的。

p:nth-child(2);  那么，它的父元素的所有子元素。排序为第3个的元素必须是p，才有效（从1开始计数。）

常见用法：

li:nth-child(2n) {} ;//偶数的li

---

【10】nth-last-child(n)

【11】nth-of-type(n)

匹配同类型中的第n个同级兄弟元素E。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body

该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E

【12】nth-last-of-type(n)

---

【13】only-child

E:only-child { sRules }

只有一个子元素的元素。

比如说p .只有文本节点作为子元素。

【】用在子元素上

【】它的父元素只有一个子元素。

---

【14】only-of-type

【】用在子元素上

【】它的父元素只有一个子元素。

【】并且的它的类型为指定类型。

**