CSS选择器与优先级详解（一）

作者: betterwlf | 来源:发表于2016-05-22 13:41 被阅读2768次

文章主要介绍什么是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表示。