(转)css选择器及其优先级
文章主要介绍什么是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;}
执行效果:

b.class选择器:是以独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,也就是要保证类名在html标记中存在。
HTML
<div class="header">我的前端学习之旅</div>
CSS
.header{color:green;}
执行效果:

c.元素选择器:通过note节点名称匹配元素。
HTML
<span> Here is a span.</span>
CSS
span{
background-color:blue;
border:1px solid #ccc;
}
执行效果:

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; } |
示例如下:

实现效果如下:

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"; } |
示例如下:

执行效果:
鼠标点击之前:

鼠标点击之后:

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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
(转)css选择器及其优先级的更多相关文章
- CSS选择器以及优先级与匹配原理
最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...
- CSS选择器、优先级与匹配原理(转)
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
- 详解CSS选择器、优先级与匹配原理
原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...
- 转载:详解CSS选择器、优先级与匹配原
转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...
- CSS选择器、优先级和匹配原理
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- 详解CSS选择器、优先级与匹配原理【转】
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- CSS 选择器及优先级
CSS 选择器及优先级 1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么 ...
- CSS选择器、优先级与匹配原理
为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...
- CSS选择器及其优先级
一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...
随机推荐
- leetcode ex3 找出穿过最多点的直线 Max Points on a Line
题目 https://oj.leetcode.com/problems/max-points-on-a-line/ 答案与分析 http://www.aiweibang.com/yuedu/18326 ...
- 调用DATASNAP+FIREDAC的远程方法有时会执行二次SQL或存储过程的BUG(转永喃兄)
调用DATASNAP+FIREDAC的远程方法有时会执行二次SQL或存储过程的BUG 1)查询会重复执行的情形:Result := DATASETPROVIDER.Data会触发它关联的DATASET ...
- js总结001
JSTL 表达式与 EL 语言 http://leon906998248.iteye.com/blog/1502569 2 jquery中$each()方法的使用指南 http: ...
- Haskell语言学习笔记(81)Data.Typeable
Data.Typeable 利用 Data.Typeable,可以打印动态类型信息. class Typeable (a :: k) where typeRep# :: TypeRep a typeR ...
- .Net编译原理简单介绍
首先简单说一下计算机软件运行.所谓软件运行,就是一步一步做一些事情.计算机只认识0和1.给计算机下命令,只能是0与1的方式,确切的说,其实是CPU只认识0和1,因为软件运行是CPU控制的.人直接操作0 ...
- 如何使用JDBC查询指定的记录
//连接数据库 public class JdbcDao { private Connection conn=null; private String strSql=null; publi ...
- Excel导入
public static Collection importExcelByIs(InputStream inputstream, List<CgFormFieldEntity> list ...
- Structs复习 Action
引入jar包 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...
- 利用monkeyrunner、python脚本来做多设备多apk适配ui界面截屏的自动化测试
http://www.cnblogs.com/youxilua/archive/2011/11/25/2262715.html
- Docker虚拟化平台
1.虚拟化技术的概念 1)虚拟化就是把物理资源转变为逻辑上可以管理的资源,以打破物理结构间的壁垒,让计算机的元件运行在虚拟的基础上,而不是真实的物理设备: 2)虚拟化技术可以将物理机硬件资源虚拟生成单 ...