CSS学习笔记2复合选择器

复合选择器：对基础选择器组合而成的。
1.后代选择器（包含选择器）

<ul>
        <li></li>
</ul>
<ul class="nav">
        <li></li>
</ul>
<ol>
        <li></li>
</ol>

通过 父元素 子元素 的方式选中< ol>中的li元素。
如：

ol li{
	color : red;
}

通过 类名 子元素 的方式选中< ul class=“nav”>中的< li>标签。
如：

.nav li {
	color : red;
}

2.子选择器
子元素选择器，只能选择作为某元素的最近一级子元素。
语法:
元素1 > 元素2 {
样式声明；
}
例如:

div>a{
	color : red;
}

    <div>
        <a href="#"></a>
        <p></p>
    </div>

如上代码中，a标签为div的子元素。
3.并集选择器
语法:
元素1,元素2 {
样式声明;
}
例如:

.p1 ,
.p2 {
     color: blue;
}

4.伪类选择器
书写特点用冒号 " : "
a.  链接伪类

<style>
	/*选择所有未访问过的链接*/
	a : link {
		color : #333;
		text-decoration : none;
	}
	/*选择访问过后的链接*/
	a : visited {
		color : orange;
		text-decoration : none;
	}
	/*选择鼠标经过的链接*/
	a : hover{
		color :skyblue;
		text-decoration : none;
	}
	/*选择鼠标正按着的链接*/
	a : active{
		color :green;
		text-decoration : none;
	}
</style>

注意!要按顺序写！！
因为a链接在浏览器中具有默认样式，所以我们实际开发工作中都需要个链接单独指定样式。
5.伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况< input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input : focus {
	background-color: yellow;
}