选择器

元素选择器

E{ }



标题
正文内容

E F{ }
1. 包含选择器，又称之为：后代选择器。
2. 选择所有被E元素包含的F元素。
3. 与子选择器不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子..
E>F{ }
1. 子选择器
2. 选择所有作为E元素的子元素F。
3. 与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。

E+F{ }

# 此例，如果使用 p+p{color:#f00;} ，那么p2,p5将会变成红色；
# 如果使用p~p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；


p1
p2
这是一个标题
p3
这是一个标题
p4
p5

E~F{ }
1. 兄弟选择符
2. 选择E元素后面的所有兄弟元素F。
3. 与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

[att]
选择具有for属性的所有元素


 不带有 for 属性的 p 元素
 带有 for 属性的 p 元素 
 带有 for 属性的 p 元素

E[att="val"]
选择具有for属性，并且for=Alice的所有元素


 不带有 for 属性的 p 元素
 带有 for 属性的 p 元素，且for的值为 Ethan 
 带有 for 属性的 p 元素，且for的值为 Alice

E[att^="val"]
选择具有att属性，且属性值以字符串val开头的E元素。

#此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头


1
2
3

E[att$="val"]
选择具有att属性且属性值为以val结尾的字符串的E元素。

#此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾


1
2
3

E[att*="val"]
选择具有att属性且属性值为包含字符串val的E元素。

#此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b


1
2
3

:only-child
匹配父元素仅有一个子元素，且该子元素为E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。



只有唯一一个子元素

    结构性伪类选择符 only-child   # 只有 这个字体变色了

有多个子元素

    结构性伪类选择符 only-child
    结构性伪类选择符 only-child
    结构性伪类选择符 only-child

:first-of-type
同类型中的第一个同级兄弟元素E
:last-of-type
匹配同类型中的最后一个同级兄弟元素E。
该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E。
:only-of-type
匹配同类型中的唯一的一个同级兄弟元素E。
该选择符总是能命中父元素的唯一同类型子元素E，不论该元素的位置。
```
  结构性伪类选择符 only-of-type
```
:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E。
:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E。
该选择符总是能命中父元素的倒数第n个为E的子元素，不论倒数第n个子元素是否为E。
:empty
匹配没有任何子元素（包括text节点，即文字）的元素E。

:not(s)
匹配不含有s选择符的元素E。

  

否定伪类选择符 not(s)  #只有class为 .abc的未变色，后面的三个都变色了
否定伪类选择符 not(s)
否定伪类选择符 not(s)
否定伪类选择符 not(s)