第二章：CSS的复合选择器

htmledit_views">

一、并集选择器

二、交集选择器

三、后代选择器

四、子代选择器

五、兄弟选择器

六、属性选择器

七、伪类选择器

1.动态伪类

2.结构伪类

3.否定伪类

4.UI伪类

5.目标伪类

6.语言伪类

八、伪元素选择器

九、选择器的优先级

十、总结

一、并集选择器

同时选择多个选择器，并给它们添加相同的样式，使用逗号（,）隔开。

html" title=css>css">.cat,
.pig,
.cattle,
.dog{font-size: 80px;background-color: red;width: 400px;
}

二、交集选择器

选出同时具有多个特征的元素，使用交集选择器，不需要任何符号（包括空格），所有选择器均可交集。

html" title=css>css">        /* 即时p标签又是beauty类的交集 */p.beauty{color: green;}/* 类的交集，既是no-beauty又是cute */.no-beauty.cute{color: blue;}

三、后代选择器

HTML元素之间的嵌套和并列使它们之间建立了父子，兄弟等关系，可以通过这些关系锁定要找的元素。后代之间使用空格间隔，可以跳级选择。

html" title=css>css">        ul li a{color: orange;}ol li a{color: pink;}

四、子代选择器

子代选择器只能选出最直接的后代，所以必须是亲儿子，直接嵌套的，孙子都不行，使用大于号（>）连接。

html" title=css>css">        div>a{color: red;}div>p>a{color: green;}

五、兄弟选择器

兄弟选择器有两种：相邻兄弟选择器和通配兄弟选择器。

相邻兄弟选择器只能选出一个离它最近的兄弟，由于代码是从上往下编译的，所以兄弟只能是往下的兄弟，之前的无法选中，使用加号（+）连接。

html" title=css>css">/* 相邻兄弟选择器与div最近的p元素，且是往下看 */div+p {color: red;}

通配兄弟选择器可以选出所有的兄弟，但是也只能往下看，使用（~）连接。

html" title=css>css">/* 通配兄弟选择器：所有的兄弟均选择（也是只能往下看） */div~p {color: green;}

六、属性选择器

可以选出具有某个属性的元素，使用中括号（[]）包裹，具体使用有五种情况，使用方法如下：

html" title=css>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.动态伪类

选择具有一定动态特征的元素，比如鼠标悬浮，有没有被访问过，有无焦点等等。

具体见代码：

html" title=css>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个该元素，更多见代码：

html" title=css>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（）来否定，即除了括号类的，均选中。示例:

html" title=css>css">        /* 选中没有fail属性的元素 */div>p:not(.fail) {color: red;}

4.UI伪类

主要是针对表单元素，比如选出已勾选的单选框，复选框，被禁用的input元素等，示例：

html" title=css>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（）关键字，选出指定语言的元素，示例：

html" title=css>css">        div:lang(en){color: red;}:lang(zh-CN){color: green;}

八、伪元素选择器

可以选中某个元素中的某一部分，比如一个元素的第一个字，第一行，选中部分等等。示例：

html" title=css>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";}