CSS之复合选择器

CSS之复合选择器

CSS的复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成。 常用复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

1.后代选择器(重要)：
我们可以选择父元素里面的子元素进行样式声明。
语法格式如下:

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

举例说明：

ul li { color: red;}

.red ul li {color:red}
/*同样我们可以联合类选择器进行使用*/

注：两元素需要用空格隔开，最终修改的是元素2，元素2必须是元素1的后代。

2.子选择器：
子选择器与后代选择器最大的区别就是子选择器只能选择作为某元素最近一级的子元素。
语法格式如下：

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

例如：

div > p {样式声明}

注：只对最近一级的子元素有效。俗称亲儿子选择器。

3.并集选择器(重要)：
当我们需要同时对多组标签定义样式的时候，我们就可以使用并集选择器。
语法格式如下：

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

例如：

div ，p {color: red;}

4.伪类选择器：
伪类选择器用于对某些选择器添加特殊的效果，例如给链接添加特殊效果。
伪类选择器有很多，例如链接伪类、结构伪类等。伪类选择器最大的特点就是通过：(冒号)表示。

链接伪类选择器(重要)：

a:link       选择所有未被访问过的链接
a:visited    选择所有已被访问过的链接
a:hover      选择鼠标指针位于其上的链接
a:active     选择鼠标按下但未松开的链接

注：不论鼠标在哪里，链接始终是链接，所以link或visited的样式会覆盖hover和active的，所以我们定义样式的时候一般采用上面的顺序来定义，即LVHA。

focus伪类选择器：
:focus伪类选择器用于选取获得焦点(光标)的表单元素。
一般情况下<input>类表单元素才能获取。
例如：

input:focus{
	background-color ; red ;
}