CSS复合选择器

后代选择器

• 概念: 后代选择器又称为包含选择器
• 作用: 用来选择元素或元素组的子孙后代
• 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。 

父级 子级{属性:属性值;属性:属性值;}

• 语法

.class h3{color:red;font-size:16px;}

• 当标签发生嵌套时，内层标签就成为外层标签的后代。

• 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

子元素选择器

• 作用: 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
• 语法

.class>h3{color:red;font-size:14px;}

交集选择器

• 条件: 交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
• 语法

p.one {
    color:red;
    font-size: 14px;
}

• 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

交集选择器 是 并且的意思。 即...又...的意思

比如: p.one 选择的是：类名为 .one  的 段落标签。  

并集选择器

• 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。

• 并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

• 语法

.class, h3{
    color: red;
    font-size: 16px;
}

• 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。

比如 .one, p, #test {color: #F00;}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。

链接伪类选择器

• 作用: 用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。伪类选择器很多，比如链接伪类，结构伪类等等。
• 语法:

- a:link      /* 未访问的链接 */
- a:visited   /* 已访问的链接 */
- a:hover     /* 鼠标移动到链接上 */
- a:active    /* 选定的链接 */

案例

a {   /* a是标签选择器  所有的链接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
            color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}