CSS 的复合选择器

后代选择器 (重要）

后代选择器 又称为 包含选择器

例如：

ul li { 样式声明 } /* 选择 ul 里面所有的 li 标签元素 */

元素1 和 元素2 中间用 空格隔开

 元素1 是父级，元素2 是子级，最终选择的是 元素2

 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

子选择器 (重要）

语法：

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

元素1 和 元素2 中间用 大于号 隔开

 元素1 是父级，元素2 是子级， 最终选择的是 元素2

 元素2 必须是 亲儿子， 其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

伪类选择器

伪类选择器 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是 用冒号（:）表示 ，比如 :hover 、 :first-child

链接伪类选择器实际工作开发中的写法：

 链接伪类选择器

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

a {

color: gray;

}

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

a:hover {

color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */

}

:focus 伪类选择器

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus {

background-color:yellow;

}

  复合选择器总结