本文详细介绍了CSS的选择器类型，包括标签选择器、类选择器、ID选择器、后代选择器、并集选择器、伪类选择器以及CSS3新增的属性选择器和结构伪类选择器。通过实例演示了如何精确定位和应用样式，并讨论了选择器的权重和组合使用技巧。
前言：
CSS用于美化网页，布局页面，想用CSS首先就得先定位到想要美化的html标签，这时候就需要CSS选择器来精确定位到具体标签。
CSS基本格式：
选择器{
样式1：具体值；
样式2：具体值；
……
}标签选择器：
直接拿标签放在选择器的位置，这样会选择全部改标签，无法具体指定某特定标签，常用于全局布局。
标签名{
样式1：具体值；
样式2：具体值；
}例：
类选择器：
'.'加上类名放在选择器位置，可以给指定类名的标签进行CSS操作。
.类名{
样式1:具体值;
样式2:具体值;
}例:
我类名随便取的，你们千万不要学，类名一定要见名知意。
ID选择器:
'#'加上id名，可以非常精确的指定某标签，但是id名尽量唯一，因为id名就相当于我们的身份证号，id名不唯一了就跟类名没什么区别了。
#id名{
样式1:具体值;
样式2:具体值;
}例：
后代选择器（包含选择器）：
标签中常含嵌套关系，后代选择器很常用。
父类 子类{
样式1:具体值;
样式2:具体值;
}例：
并集选择器:
可以同时选择多种。
选择器1，
选择器2{
样式1:具体值;
样式2:具体值;
}例：
伪类选择器：
标签：触发条件。常用于链接和鼠标经过的动画。
标签:hover 鼠标位于标签上方时触发.
标签:active 鼠标按下未弹起时触发.
当标签是链接 （<a>）时多两个触发条件:
a:link 所有未访问过的链接
a:visited 所有已访问过的链接
例:
由于涉及到动态效果，可以自己去试着敲一下代码看看效果。
CSS3新增选择器：
属性选择器：
根据属性来选择标签。
标签[属性]{
样式1:具体值;
样式2:具体值;
}其中"属性"可以是具体值,即只有属性完全相等时才会选中.也可以选择属性值以某值开头、结尾，或者属性值含某值即可。
例：
属性值相等：a[title="1"]
以某值开头：a[title^="1"]
以某值结尾：a[title$="1"]
包含某值：a[title*="1"]
例:
结构伪类选择器:
可以具体选择标签的第n个子标签.
标签::nth-child(n){
样式1:具体值;
样式2:具体值;
}其中n可以为具体数值,表示选取第n个子标签.
标签内的子标签默认排序号,从上往下从1号开始.
n为'even'表示选取序号为偶数的子标签,n为'odd'表示选取序号为奇数的子标签.
n也可以为含n的式子,n为序号(从0到子标签个数)
例:
伪元素选择器:
通过CSS创建标签.
标签::before/after{
content:""
样式1:具体值;
样式2:具体值;
}"before"时在标签内部的前面创建标签.
"after"时在标签内部的后面创建标签.
"content"必须要有,哪怕你标签不要内容也放个空字符串上去.
例:
小结:
多种选择器可以混用,混用时要注意选择器的先后顺序,即权重.
权重相同时，标签样式采用就近原则。
选择器混用时权重叠加，但是不能跨级加权重。
例如十二个类选择器混用，权重为0 0 12 0，权重仍然不敌一个id选择器，但是权重大于十个类选择器。
| 选择器 | 权重 |
| 继承或者* | 0000 |
| 元素、标签选择器 | 0001 |
| 类、伪类选择器 | 0010 |
| id选择器 | 0100 |
| 行内样式 | 1000 |
| ！import | ∞(无穷大) |
好吧，到结尾了才发现我又漏掉了一些。
继承：
用选择器给标签修改样式时，子类会继承父类的样式，但这个权重很低，随便哪个选择器修改一下子类的样式就改掉了。
*：
通配符，表示选择全部标签，跟继承一样权重很低，一般都用于全局布局。
行内样式：
一般CSS写在html的<head>标签或者单独开个.CSS文件再导入,但也可以直接写在标签内部.
<p style="font_size: 10px">这是一段话</p>!import:
直接加在样式结尾,权重无穷大,表示非常重要,该样式必执行。
扫一扫
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
