文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正。
一、什么是CSS选择器?
CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。
二、CSS选择器的分类
1.基础选择器
a.id选择器:通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时,ID选择器是以#开头的。
HTML
<div id="header">我的前端学习之旅</div>
CSS
header{color:blue;}
执行效果:
![](http://upload-images.jianshu.io/upload_images/2047525-a8a2792413051f1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/196)
b.class选择器:是以独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,也就是要保证类名在html标记中存在。
HTML
<div class="header">我的前端学习之旅</div>
CSS
.header{color:green;}
执行效果:
![](http://upload-images.jianshu.io/upload_images/2047525-6d3527ff9c94d23c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/196)
c.元素选择器:通过note节点名称匹配元素。
HTML
<span> Here is a span.</span>
CSS
执行效果:span{
background-color:blue;
border:1px solid #ccc;
}
![](http://upload-images.jianshu.io/upload_images/2047525-608cecf5a0c67fd3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/108)
2.属性选择器:
选择器 | 含义 | 实例 |
---|---|---|
E[attr] | 匹配所有具有属性attr的元素 | p[title] { color:#f00; } |
E[att=val] | 匹配所有att属性等于"val"的E元素 | div[class=error] { color:#f00; } |
E[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素 | td[headers~=col1] { color:#f00; } |
E[att/=val] | 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以"val"开头的E元素,主要用于lang属性,比如"en"、"en-us"、"en-gb"等等 | p[lang/=en] { color:#f00; } |
注意:最后一个选择器是E[attr|=val],由于输入|会对表格造成影响,只能用/代替。
CSS3新增了一些属性选择器,待持续更新。
3.组合选择器
选择器 | 含义 | 实例 |
---|---|---|
E,F | 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 | div,p { border:1px solid #ccc;} |
E F | 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 | div p{color:red;} |
E > F | 子元素选择器,匹配所有E元素的子元素F | div > strong { color:#f00; } |
E + F | 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F | p + p { color:#f00; } |
示例如下:
![](http://upload-images.jianshu.io/upload_images/2047525-33f104b562d09da9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/577)
实现效果如下:
![](http://upload-images.jianshu.io/upload_images/2047525-5e0a091023fafb0a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/228)
4.伪类选择器
选择器 | 含义 | 实例 |
---|---|---|
E:first-child | 匹配父元素的第一个子元素 | p:first-child { font-style:italic; } |
E:link | 匹配所有未被点击的链接 | |
E:visited | 匹配所有已被点击的链接 | |
E:active | 匹配鼠标已经其上按下、还没有释放的E元素 | |
E:hover | 匹配鼠标悬停其上的E元素 | input[type=text]:focus:hover { background:#fff; } |
E:focus | 匹配获得当前焦点的E元素 | input[type=text]:focus { color:#000; background:#ffe; } |
E:lang(c) | 匹配lang属性等于c的E元素 | q:lang(sv) { quotes: "201D" "201D" "2019" "2019"; } |
示例如下:
![](http://upload-images.jianshu.io/upload_images/2047525-eb9ab6c82c057a8d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
执行效果:
鼠标点击之前:
![](http://upload-images.jianshu.io/upload_images/2047525-f79ac552b27f0ed7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/187)
鼠标点击之后:
![](http://upload-images.jianshu.io/upload_images/2047525-0f9df94105038227.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/237)
CSS3新增的一些伪类选择器之后会持续更新的,敬请期待。
三、选择器的优先级
从高到低依次是:
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
实际上,同一个元素可以使用多个规则来指定它的字体颜色,每个规则都有自己的选择器。显然最终只有一个规则起作用(不可能一个字既是红色又是绿色),那么该规则的特殊性最高,特殊性即css优先级。那么CSS的优先级怎么计算呢?
选择器的特殊性值表述为4个部分,用0,0,0,0表示。
- ID选择器的特殊性值,加0,1,0,0;
- 类选择器、属性选择器或伪类,加0,0,1,0;
- 元素和伪元素,加0,0,0,1;
- 通配选择器对特殊性没有贡献,即0,0,0,0;
- 最后比较特殊的一个标志!important(权重),它没有特殊值,但是他的优先级是最高的,为了方便记忆,可认为他的默认值是1,0,0,0.
示例如下:
执行效果:
选择器的特殊性值是从左向右排列的
先说到这里吧,有什么问题欢迎大家指正,剩下的内容稍后会在wlf'Blog更新,敬请关注。
作者:betterwlf
链接:https://www.jianshu.com/p/e8b240c87997
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。