目录
一、并集选择器
同时选择多个选择器，并给它们添加相同的样式，使用逗号（,）隔开。
css
.cat,
.pig,
.cattle,
.dog{
font-size: 80px;
background-color: red;
width: 400px;
}二、交集选择器
选出同时具有多个特征的元素，使用交集选择器，不需要任何符号（包括空格），所有选择器均可交集。
css
/* 即时p标签又是beauty类的交集 */
p.beauty{
color: green;
}
/* 类的交集，既是no-beauty又是cute */
.no-beauty.cute{
color: blue;
}三、后代选择器
HTML元素之间的嵌套和并列使它们之间建立了父子，兄弟等关系，可以通过这些关系锁定要找的元素。后代之间使用空格间隔，可以跳级选择。
css
ul li a{
color: orange;
}
ol li a{
color: pink;
}四、子代选择器
子代选择器只能选出最直接的后代，所以必须是亲儿子，直接嵌套的，孙子都不行，使用大于号（>）连接。
css
div>a{
color: red;
}
div>p>a{
color: green;
}五、兄弟选择器
兄弟选择器有两种：相邻兄弟选择器和通配兄弟选择器。
相邻兄弟选择器只能选出一个离它最近的兄弟，由于代码是从上往下编译的，所以兄弟只能是往下的兄弟，之前的无法选中，使用加号（+）连接。
css
/* 相邻兄弟选择器与div最近的p元素，且是往下看 */
div+p {
color: red;
}通配兄弟选择器可以选出所有的兄弟，但是也只能往下看，使用（~）连接。
css
/* 通配兄弟选择器：所有的兄弟均选择（也是只能往下看） */
div~p {
color: green;
}六、属性选择器
可以选出具有某个属性的元素，使用中括号（[]）包裹，具体使用有五种情况，使用方法如下：
css
/* 具有title属性即可被选中，无论里面的值 */
[title]{
color: red;
}
/* 要求title的值为222 */
[title="222"]{
color: green;
}
/* 选择title属性以a开头的元素 */
[title^="a"]{
color: blue;
}
/* 选择title属性以4结尾的元素 */
[title$="4"]{
color: chocolate;
}
/* 选中title属性且属性值中有1的元素，有即可 */
[title*="1"]{
color: gold;
}七、伪类选择器
伪类：很像类，但不是class，用冒号表示，选出具有一定特征的元素，但这些特征不是类。
1.动态伪类
选择具有一定动态特征的元素，比如鼠标悬浮，有没有被访问过，有无焦点等等。
具体见代码：
css
/* 没有访问过的是橙色 */
a:link {
color: orange;
}
/* 访问过的是棕色 */
a:visited {
color: brown;
}
/* 选中的是鼠标悬浮状态的a元素，激活状态是指鼠标左键按住的时候为激活状态 */
a:hover {
color: skyblue;
}
/* 选中激活状态的a元素 */
a:active {
color: green;
}
/* 输入框和下拉框获得焦点是字体是橙色，背景是绿色 */
input:focus,
select:focus {
color: orange;
background-color: green;
}2.结构伪类
结构伪类是通过元素在HTML中的相对位置来选出元素，比如first-child表示第一该元素，last-child表示最后一个该元素，nth-child(n)表示第n个该元素，更多见代码：
css
/* 选中的是第一个儿子p元素 */
div>p:first-child {
color: red;
}
/* 选中最后一个儿子 */
div>p:last-child {
color: red;
}
/* 选中第n个儿子p元素 ,括号内可以是公式，必须是一次函数an＋b的形式*/
div>p:nth-child(2n) {
color: red;
}
/* 所有同类型的兄弟排序，并选择第一个 */
div>p:first-of-type {
color: red;
}
/* 倒数写法，中间加上last */
div>p:nth-last-child(2) {
color: red;
}
/* 同理 */
div>p:nth-last-of-type(2) {
color: green;
}
/* 选中的是没有兄弟的span元素 */
span:only-child {
color: red;
}注意：1.同类型的兄弟指前面的限定条件所选出来的特定元素，其顺序不受其他类型元素的影响，而nth-child(n)指的是父元素的第n个儿子。当父元素下的子元素都是一种类型，两者是一样的。2.括号里面的公式只能是一次函数，an+b，即使是1-n，也要写为-n+1。
3.否定伪类
使用关键字not（）来否定，即除了括号类的，均选中。示例:
css
/* 选中没有fail属性的元素 */
div>p:not(.fail) {
color: red;
}4.UI伪类
主要是针对表单元素，比如选出已勾选的单选框，复选框，被禁用的input元素等，示例：
css
/* 选中的是勾选的复选框或单选框 */
input:checked{
width: 100px;
height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled{
background-color: gray;
}
/* 选中的是可用的input */
input:enabled{
background-color: green;
}5.目标伪类
选中用户主动选定的目标（target），示例（效果：通过锚点跳转，UI选择器选出跳转的元素，背景改为绿色）：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>目标伪类</title>
<style>
div{
background-color: grey;
height: 300px;
}
div:target{
background-color: green;
}
</style>
</head>
<body>
<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>
<a href="#three">去看第3个</a>
<a href="#four">去看第4个</a>
<a href="#five">去看第5个</a>
<a href="#six">去看第6个</a>
<div id="one">第1个</div>
<br>
<div id="two">第2个</div>
<br>
<div id="three">第3个</div>
<br>
<div id="four">第4个</div>
<br>
<div id="five">第5个</div>
<br>
<div id="six">第6个</div>
<br>
</body>
</html>6.语言伪类
通过lang（）关键字，选出指定语言的元素，示例：
css
div:lang(en){
color: red;
}
:lang(zh-CN){
color: green;
}八、伪元素选择器
可以选中某个元素中的某一部分，比如一个元素的第一个字，第一行，选中部分等等。示例：
css
/* 第一个字 */
div::first-letter {
color: red;
font-size: 40px;
}
/* 第一行 */
div::first-line {
background-color: yellow;
}
/* 被选中的部分 */
div::selection {
background-color: green;
color: orange;
}
/* 输入框里的默认文字 */
input::placeholder {
color: skyblue;
}
/* 元素的前面 */
p::before {
content: "￥";
}
/* 元素的后面 */
p::after {
content: ".00";
}九、选择器的优先级
众多选择器如何，万一冲突了要如何抉择呢？
选择器可以分成三个等级，第一级是id选择器，第二级是类，伪类，属性选择器，第三级是元素，伪元素选择器，他们的个数分别代表了（a,b,c）的三个值，然后比较选择器的优先级就按照（a,b,c）来比较，先看a，再看b，最后看c，直到比较出优先级为止，都一样，就后面覆盖前面。
如果需要提高优先级可以在样式后面加上!important，这是优先级最高的，比行内样式还高。但是要谨慎使用！
十、总结
本章节介绍了CSS的复合选择器，以及选择器的优先级问题，这是CSS和js的基础。下一章将介绍CSS的颜色表示方法。