CSS Selector

CSS选择器类型

1、通用选择器

语法：* { attr: value;}

Tip:伪类元素:root也有类似额效果，在其中声明自定义变量，然后在CSS文档全局使用；语法：:root { --variable-attr: value;},调用语法：{ attr: var(--variable-attr);}

Code Sample

.a

div :first-child {
    background-color: white;
}

.b

div:first-child {
    background-color: black;
}

以上，这两段代码效果有什么不同呢。分析一下；首先a段的选择器是后代选择器，表示div中的第一个元素；b段选择器类型是组合选择器，由元素选择器和伪类选择器组合构成，可以这么理解，它选中任意父容器中第一个div元素；后代选择器和组合选择器后面都会提到。

2、元素选择器

语法：element {attr: value;}

用于匹配所有指定类型的所有元素

3、类选择器

语法：.classname {attr: value;}

此选择器通过(.)表示并匹配指定类的所有元素

Tip:类应用到很多元素时，可以element.classname {attr: value;}缩小匹配范围

4、ID选择器

语法：#idname:{attr: value;}

此选择器由哈希符号(#)，并匹配包含指定id的唯一元素

5、属性选择器

属性选择器比其他选择器更加复杂，并且有若干语法可以根据满足条件应用到HTML元素。

换句话说，它匹配包含指定属性且该属性的值满足给定条件的所有HTML元素。

属性选择器语法

语法1

[property] {attr: value;)

匹配具有指定属性的元素

语法2

[property=value] {attr: value;}

匹配其属性为某一值得元素

Tip:定位id选择器（虽然没有什么卵用）[id=idname] {attr: value;}

语法3

[property~=value] {attr: value;}

匹配property的值是由空格分隔的单词列表，并且其中一个正好是value的元素

Tip:模拟类选择器[class~=value] {attr: value;}

语法4

[property|=value] {attr: value;}

匹配property的值正好是value或以value后跟连字符开头的元素

语法5

[property^=value] {attr: value;}

匹配以value开头的元素

语法6

[property$=value] {attr: value;}

匹配property的值以value结尾的元素

语法7

[property*=value] {attr: value;}

匹配property的值包含至少出现一次value的元素

6、分组选择器

CSS中的分组选择器基本用于将那些我们想要应用相同样式属性的不同类型或不同id/class的元素放在一起

语法：element1,element2,...elementN {attr: value;}

此选择器用(,)表示，匹配列表中的所有元素，并将相同的规则集应用。

7、组合选择器

.a 后代选择器

语法：element1 element2 {attr: value;}

这个组合选择器用( )表示并匹配所有element1的后代element2

.b 子元素选择器

语法：element1>element2 {attr: value;}

该组合选择器用（>）表示，并匹配所有element1直接子元素element2

.c 普通同级组合选择器

语法： element1~element2 {attr: value;}

此选择器由波浪线（~）表示，并匹配所有与element1同级并在它之后出现的element2

.d 相邻同级组合选择器

语法： element1+element2 {attr: value;}

此组合选择器用（+）表示，匹配所有与element1同级且紧跟其后的所有element2

8、伪类

CSS伪类是添加到选择器并定义所选元素特殊状态的关键字

语法： element:pseudo-class {attr: value;}

此选择器用（:）表示

常见的伪类：:active,:hover,:focus,:disabled,:checked,:first-child,:nth-child,:first-of-type

9、伪元素

CSS伪元素是添加到选择器中的关键字，用于设置所选元素特定的部分（创造了新元素）的样式。

语法：element::pseudo-element {attr: value;}

此选择器用（::）表示，（在此之前还可以用单冒号表示，不过尽量不要使用。）

常见伪元素：::after,::before,::marker,::placeholder,::first-letter

一些实例就没有写，只作为记录，重点是要有探究的能力，没必要去看示例，根据理论概念去探究就好。