CSS复合选择器

一、后代选择器（重点）

1、概念：后代选择器又称为包含选择器。

2、作用：用来选择元素或元素组的子孙后代（其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子）。

3、语法：

父级 子级{属性：属性值；属性：属性值；}

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

4、当标签发生嵌套时，内层标签就变成外层标签的后代。

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

二、子元素选择器

1、作用：子元素选择器只能选择作为某元素子元素（亲儿子）的元素。（其写法就是把父级标签写在前面，子级标签写在后面，中间跟个 > 进行连接）

2、语法：

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

3、这里的 子 指的是 亲儿子 不包括孙子 重孙子之类。

三、交集选择器

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

2、语法：

h3.class {color:red;fongd-size:25px;}

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

3、记忆技巧：

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

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

4、用的相对来说较少，不太建议使用。

四、并集选择器（重点）

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

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

3、语法：

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

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

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

比如：.one, .p,#text {color:#F00;}

表示  .one 和 .p 和 #text 这三个选择器都会执行颜色为红色。

通常用于集体声明。

五、链接伪类选择器（重点）

1、伪类选择器和类选择器的区别：

类选择器：.demo {}

伪类选择器：:link {]

2、作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择 第1个，第n个元素。

3、链接伪类选择器：

①a:link（未访问的链接）

②a:visited（已访问的链接）

③a:hover（鼠标移动到链接上）

④a:active（选定的链接）

4、注意：

①写的时候，他们的顺序尽量不要颠倒，按照 lvha 的顺序，否则可能引起错误；

②记忆法：

love hate 爱上了讨厌

lv包包 非常好hao

③因为叫链接伪类，所以都是利用交集选择器 a:link a:hover；

④因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

⑤实际开发中，我们很少写全四个状态，一般写法如下：

a {

            /*a是标签选择器 所有的链接 */

            font-weight: 700;

            font-size: 16px;

            color: gray;

        }

        

a:hover {

            /* hover 是链接伪类选择器 鼠标经过 */

            color: red;

            /* 鼠标经过时由原来的灰色变成了红色 */

        }