css复合选择器

css复合选择器

1、复合选择器

常用的复合选择器包括：后代选择器，子选择器，并集选择器、交际选择权、伪类选择器。

1、后代选择器

语法：

元素1 元素2 {

样式声明

}

上述语法表示元素1里面的所有元素2（后代）

语法说明：

元素1和元素2中间用空号隔开。

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

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

元素1和元素2可以是任意的基础选择器

例子：

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

子选择器（重要）

定义：

​ 子元素选择器 （子选择器）只能选择作为某元素的最近一级子元素。

（简单理解就是选亲儿子元素）

语法：

元素 > 元素2 （样式声明）

​ 上述语法表示选择元素1里面的所有直接后代（子元素）元素

语法说明：

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

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

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

例子：

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

3、交集选择器（重要）

定义：

交集选择器就是在两个标签相交的部分，也就是交集进行修改格式。

语法：

div.p {

样式声明

}

4、并集选择器（重要）

定义：

​ 并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2 { 样式声明 }

（表示选择元素1和元素2.）

语法说明：

元素1和元素2中间用逗号隔开

逗号可以理解为和的意思

并集选择器通常用于集体声明

例子：

ul,div { /* 选择ul 和 div标签元素 */}

5、伪类选择器

定义：

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

语法:

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

​ a:link 没有点击过的（访问过的）链接

​ a:visited 点击过的（访问过的）链接

​ a:hover 鼠标经过的那个链接

​ a:active 鼠标正在按下还有没弹起鼠标的那个链接

链接伪类选择器注意事项

为了确保生效，请按照lvha的循顺序声明：link-visited-hover-active。

记忆法：l v h a

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

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

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

a {

color: gray;

}

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

a:hover {

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

}

focus 伪类选择器

定义：

:focus伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况下类表单元素才能获取

例子：

input:focus {

background-color:yellow

}