CSS复合选择器

CSS基础属性以及基础选择器见：
https://blog.youkuaiyun.com/Arcofcosmos/article/details/122561105

复合选择器建立在基础选择器的基础之上，对多个基本选择器进行不同方式组合形成的。

后代选择器（包含选择器）

选择父元素中的所有子元素，外层标签写在前，内层标签写在后，空格隔开。子元素可以被多次嵌套过，也可以是孙子后代。

后代选择器可以被随意组合，父元素可以采用类选择器的形式。

元素1 元素2 {}
ol li {color: red;}
ol a {color: red;}					
ol li a {color: red;}             //可以把父元素都写上
.ol类名 li {color: red;}

//html中a与li是ol的后代，即被包含
<ol class = "ol类名">
	<li><a href = "#">文本</li>
</ol>

子选择器

子选择器只会选择父元素的最近一级的子元素，即亲儿子元素。采用大于号>隔开。子选择器也能够随意组合，类选择器和id选择器都可组合。

元素1>元素2 {color: red;}
div>p {color: red;}            //文本1中的p才会被选中

//文本1的p与span才是div最近一级子元素
<div>
	<p>文本1</p>
	<span>
		<p>文本2</p>
	</span>
</div>

并集选择器

并集选择器可以选择多组选择器，为它们定义相同的样式，通常用于集体声明。

每组选择器使用逗号,相隔，每个选择器可以随意组合，甚至可以组合符合选择器，例如其中一个选择器可以使用后代选择器。语法格式通常竖着写。

元素1,元素2 {color: red;}
div,
p,
.pig li {color: red;}

<div>文本1</div>
<p>文本2</p>
<ul class = "pig">
	<li>文本3</li>
</ul>

伪类选择器

用于向某些选择器添加特殊效果，使用冒号:表示。有链接伪类选择器，focus伪类选择器等。

链接伪类选择器

a:link {}         //选择所有未被访问过的链接的标签
a:visited {}	  //选择所有被访问过的链接的标签，即被点击了
a:hover {}		  //选择鼠标经过的那个链接的标签，鼠标停留就会改变样式
a:active {}		  //选择鼠标点击但是还未松开的那个链接的标签

为了确保链接伪类选择器生效，若要定义所有链接伪类选择器，则按照link visited hover active的顺序定义链接伪类选择器。

a链接标签在浏览器中有默认样式，定义样式表时需要单独指定。

focus伪类选择器

用于选取获得焦点的表单元素，焦点可以看作鼠标光标。表单元素一般为<input>类的表单元素。

//获得鼠标光标的表单元素改变样式
input:focus {
	color: red;
}