CSS——复合类型选择器
1. 后代选择器（包含选择器）
【例】
后代选择器
嵌套用CSS标记的方法
嵌套之外的标记不生效
执行结果：
2. 子代选择器
格式：p>span{color:blue;}
- 后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”
- 子选择器：也就是只有对直接后代有影响的选择器，而对“孙子”以及对个层的后代不产生作用。
后代选择器
我变红色
我不变色
执行结果：
3. 相邻兄弟元素选择器
相邻兄弟元素选择器可选择紧接在另一 元素后的元素，且二者有相同父元素，相邻兄弟元素选择器使用“+”作为结合符。
如果需要选择紧紧接在另一元素后的元素而且者有相同父元素，可以使用相邻兄弟元来选择器。
【例】如果要将紧接在h1元素后出现的段落变为黄色，可以这样写:
h1+p{
color:yellow;
}
4. 通用兄弟元素选择器
通用兄弟元素选择器用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，通用兄弟选择器用 "~" 作为结合符。
【例】要使h1元素后的p元素都变为蓝色，可以这样写:
h1~p{
color:blue;
}
5. 伪类选择器
伪类选择器和其它选择器有所不同，它是通过触发一定的“事件”来实现效果，也就是说如果不进行任何操作是看不到该选择器的CSS样式设置的。以冒号隔开。
- link 选择器： link 选择器匹配超链接（未点击）。
- visited 选择器： visited 选择器匹配用户已经访问过的超链接。
- hover 选择器： hover 选择器匹配用户鼠标悬停（经过）在其上的任意元素。
- active 选择器： active 选择器匹配当前被用户激活的元素（一般情况下为鼠标点击该元素）。
- focus 选择器： focus选择器匹配获得焦点的元素，常用于 input 元素。
input : required 选择必填表单域
input : focus : invalid 选择当前聚焦的且含有非法输入值的表单域
input : focus : valid 选择当前聚焦的且含有合法输入值的表单域
【例】
input : required {
border : 1px solid red;
}
//输入值不符合格式时，表单右边出现×
input : :focus : invalid {
background:url('../img/cross.png') no-repeat right; //×图片
}
//输入值符合格式时，表单右边出现√
input : :focus : valid {
background:url('../img/tick.png') no-repeat right; //√图片
} a:link{ color:#009;}
a:visited{ color:#000066;}
a:hover{ color:#0099FF;}
a:active{ color:#0000cc;} 6. 伪元素选择器
伪元素选择器并不是针对真正的元素使用的选择器，伪元素选择器只能针对 CSS 中已经定义好的伪元素使用的选择器，它的使用方法如下：
选择器 ：伪元素{ 属性: 值}
伪元素选择器也可以与类配合使用，使用方法如下：
选择器 类名: 伪元素 {属性：值}
在css中提供的伪元表选择器有4个，分别如下：
- first-letter: 该选择器对应的CSS样式对指定对象内的第一个字符起作用。
- first-line: 该选择器对区的CSS样式对指定对象内的第一行内容起作用。
- before： 该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。
- after: 该选择器与内容相关的属性结合使用，用于在指定对象内部的尾端添加内容。
：first-letter
选择“块级元素”文本段落中的首个字符，只能对“块级元素”生效。
该选择器可以设置的值有：
font属性
color属性
background属性
margin属性
padding属性
border属性
text-decoration属性
vertical-align属性
text-transform属性
line-height属性
float属性
clear属性
使用示例如下：
p: first-letter {
border: 2px solid black;
color: blue;
border-radius: 5px;
padding: 5px;
}：first-line
选择“块级元素”文本段落中的首行文本，只能对“块级元素”生效。
该选择器可以设置的值有：
font属性
color属性
background属性
word-spacing属性
letter-spacing属性
text-decoration属性
vertical-align属性
text-transform属性
line-height属性
clear属性
使用示例如下：
p: first-line {
border: 2px solid black;
letter-spacing: 5px;
color: blue;
}：before
在指定的选择器之前插入一段内容。插入的内容默认为“行内元素”，可以通过“display”强制转换显示类型。
代码示例：
/*插入文本*/
p:before {
content: "插入文本";
color: red;
}
/*插入图片*/
div:before {
content: url(../img.jpg);
width: 100px;
height: 100px;
}：after
在指定的选择器之后插入一段内容，使用方式和“:before”一样。插入的内容默认也是为“行内元素”，同样可以通过“display”强制转换显示类型。代码示例同“:before”。
提示：使用“:before”和“:after”伪元素选择器不仅能为指定的元素添加文字、图片和各种利用“width”、“height”、“border”制作出来的形状，甚至还能添加音频、视频这些多媒体文件，而且具有高度自定义性。
7. 群组选择器
h2, p { color: gray; }
8. 标签指定选择器
p.aa :选中 class="aa" 的p标签
p#aa :选中 id="aa" 的p标签
9. 通用选择器（通配符选择器）
通用选择器匹配文档中的所有元素。它是最基本的选择器，不过很少使用，因为匹配过于广泛。写法如下：
Example
10. 属性选择器
- [attr]：选择定义attr属性的元素，忽略属性值；
- [attr="val"]：选择定义attr属性，且属性值为val的元素；
- [atte^="val"]：选择定义attr属性，且属性值以字符串val开头的元素；
- [attr$="val"]：选择定义attr属性，且属性值以字符串val结尾的元素；
- [attr*="val"]：选择定义attr属性，且属性值包含字符串val的元素；
- [attr~="val"]：选择定义attr属性，且属性值具有多个值，其中一个为字符串val的元素。
- [attr|="val"]：选择定义attr属性，且属性值为连字符分割的多个值，其中第一个为字符串val的元素；
Example
文本内容01
文本内容02
Hi!
Hello!
Hi!
Hello!
文本内容03
文本内容04