一、复合选择器

• 选择所有匹配的元素

1. 交集选择器

• 语法（直接列出选择器即可）：选择器1选择器2选择器3

       p.second {color: cornflowerblue;}

2. 并集选择器

• 语法（选择器间用逗号分隔）：选择器1,选择器2,选择器3

       h1,#last,.first {font-size: 20px;}

二、关系选择器

元素间的关系：

• 父元素：直接包含子元素的元素
• 子元素：直接被父元素包含的元素
• 祖先元素：直接或间接包含子元素的元素；一个子元素可以有多个祖先元素；父元素也是子元素的祖先元素
• 后代元素：被祖先元素包含的元素
• 兄弟元素：有相同父元素的元素

1. 子代选择器

• 语法：父元素 > 子元素
• 作用：选择元素所有直接的子代

        p > span {color: blue;}

2. 后代选择器

• 语法：祖先元素 后代元素
• 作用：选择祖先元素的所以指定类型后代

        div span {color: blue;}

3. 兄弟选择器

(1)选择下面直接相邻的一个兄弟

• 语法：元素 + 元素
• 作用：元素A与元素B有相同的父元素，选中在A后面且直接与A相邻的B元素

        span + span {color: blue;}

(2)选择下面的所有兄弟

• 语法：元素A ~ 元素B
• 作用：元素A与元素B有相同的父元素，选择A后面的所有B元素，A与B不必直接相邻

        span ~ span {color: blue;}

三、属性选择器

1. 选择具有某属性的元素

• 语法：[属性名]

        [title*='45'] {color: salmon;}

2. 选择具有某属性 且 属性值=某值的元素

• 语法：[属性名=属性值]

        [title='45'] {color: salmon;}

3. 选择具有某属性 且 属性值以某值开头的元素

• 语法：[属性名^=属性值]

        [title^='45'] {color: salmon;}

4. 选择具有某属性 且 属性值以某值结尾的元素

• 语法：[属性名$=属性值]

        [title$='45'] {color: salmon;}

5. 选择具有某属性 且 属性值包含某值的元素

• 语法：[属性名*=属性值]

        [title*='45'] {color: salmon;}

四、伪类选择器

含义：不是真正的类
作用：选择某种状态下的某元素

        ul > li:not(:nth-of-type(3)) {color: yellowgreen;}button:hover {color: blue;}

五、伪元素

含义：不是真正的元素
作用：选中元素中的特定位置

        p::selection {background-color: green;}div::before {content: 'ABC';color: green;}div::after {content: 'EFG';color: greenyellow;}