第十三章 CSS选择器
一、选择总汇
选择器 名称 例子描述 CSS版本
.<class> class选择器 选择 class指定类型的所有元素。 1
#id id选择器 选择 id属性的所有元素。 1
* 通用选择器 选择所有元素。 2
[attr]系列 属性选择器 选择指定after属性的元素 2～3
s1,s2,s3... 分组选择器 选择多个选择器的元素 1
s1 s2 后代选择器 1
s1 > s2 子选择器 2
s1 + s2 相邻兄弟选择器 2
s1 ～ s2 普通兄弟选择器 3
::first-line 伪元素选择器 1
::first-letter 伪元素选择器 1
::before 伪元素选择器 2
::after 伪元素选择器 2
1、通用选择器 ：（不建议使用）这是一把双刃剑，好处是非常方便，坏处是把不必要的元素也配置了。
2、元素选择器 ：直接使用元素名称作为选择器即可。
// <p>段落</p>
3、id选择器 ： html文档 CSS文档
// <p id="abc">段落</p> #abc{
color:blue;
}
4、类选择器（如果想让其中一个变色，另一个不变，只需把“.abc”改为“b.abc或p.abc即可”）
// <p class="abc">段落</p> .abc{
<b class="abc">加粗</b> color:blue;
}
5、属性选择器 ：
//所需版本 CSS2
（1）[href]{
color:blue;
}
（2）文本框的背景为红色
[type="password"]{
border:1px solid red;
}
（3）属性值具有多个值时，匹配其中一个值的属性选择器
[class～="def"]{...}
（4）比如html5文档中中有<i lang="en-us">html5</i>时
[lang|="en"]
//所需版本CSS3
（1）属性值开头匹配的选择器（开头为http的都变成红色）
[href^="http"]{
color:red;
}
（2）属性值结尾匹配的选择器（结尾为.cn的都变成红色）
[href$=".cn"]{
color:red;
}
（3）属性值包含指定的字
[href*="baidu"]{...}
二、复合选择器 （把需要变色到元素名称写在前面，并用逗号隔开）
1、分组选择器 ：
p,b,i,span{ #abc,.abc,i,span{
color:red ...
} }
2、后代选择器 ：<p><><b></b><></p> （这里b元素为p元素的后代,无论第几代）
p b {color:red;} //p空格b空格{...}
3、子选择器 <p><b></b></p> （这里b必须是p的第二代）
p > b {...}
4、相邻兄弟选择器 ：（p元素和b元素必须相邻，中间不能有其他元素）
p + b {...}
5、普通兄弟选择器 ：（p元素和b元素中间可以有其他元素）
p ～ b {...}
三、伪元素选择器：（伪选择器分为两种 第一种是下节伪类选择器，还有一种是伪元素选择器。两种容易混淆，在
-+
CSS3中为了区分，伪元素前置两个冒号（::）,伪类前置一个冒号（:））
1、::first-line 块级首行 ：（文本的第一行变色）<p>......</p>
::first-line{...} // p::first-line{...} （p文本里的第一行变色）
2、::first-letter 块级首字母 ：块级首字母或字变色
3、::before 文本前插入 ：<a href="http://www.baidu.com">百度</a>
a::before{
content:'点击'; //效果是：“点击百度”
}
4、::after 文本后插入 ：<a href="http://www.baidu.com">百度</a>
a::after{
content:'搜索'; //效果是：“百度搜索”
}
5、::selection 当选择文字时触发选择（支持度不太好，了解一下）
在页面选择一块儿文字时，触发设定的效果。