1 元素选择器:比如p{xxxx},选择文档中所有的p元素;
2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;
3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;
4 或选择器:用逗号连接多个选择器;
5 与选择器:多个选择器紧挨在一起;
6 后代选择器:用空格连接多个选择器;
7 子代选择器:用大于号连接多个选择器,它其实是后代选择器的特殊情况;
8 属性选择器:
(1) 比如p[id],选择标签上有属性“id”的p元素;
(2) 比如p[id="button1"],选择标签上有属性“id”并且id的值为“button1”的p元素;
(3) 比如p[id^=”b”],选择标签上有属性“id”并且id的值以“b”开头的p元素;
(4) 比如p[id$=”b”],选择标签上有属性“id”并且id的值以“b”结尾的p元素;
(5) 比如p[id*=”b”],选择标签上有属性“id”并且id的值包含“b”的p元素;
9 p:first-child:既是p元素,也是某元素的第一个孩子;
10 p:last-child:既是p元素,也是某元素的最后一个孩子;
11 p:nth-child(3):既是p元素,也是某元素的第三个孩子;
12 p:nth-child(odd):既是p元素,也是某元素的第奇数个孩子;
13 伪类选择器都是某种状态,比如active、link、hover,使用“:”;
14 伪元素选择器,确实有某些实体的东西,比如第一行文字、第一个文字、被选中的文字,使用“::”
15 只有多个选择器选中了同一个元素的同一个属性,才会出现优先级的问题;
16 如果两个选择器优先级相同,那么写在后面的选择器生效;
17 选择器优先级的排列:
(1) !important
(2) 内联样式
(3) id选择器
(4) 类和伪类选择器
(5) 元素和伪元素选择器
(6) *选择器
(7) 继承样式
CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。
1.基础选择器
a.id选择器:通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时,ID选择器是以#开头的。
HTML
CSS
执行效果:
b.class选择器:是以独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,也就是要保证类名在html标记中存在。
HTML
CSS
执行效果:
c.元素选择器:通过note节点名称匹配元素。
HTML
CSS
2.属性选择器:
注意:最后一个选择器是E[attr|=val],由于输入|会对表格造成影响,只能用/代替。
CSS3新增了一些属性选择器,待持续更新。
3.组合选择器
示例如下:
实现效果如下:
示例如下:
从高到低依次是:
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
选择器的特殊性值表述为4个部分,用0,0,0,0表示。
参考:
1. css优先级计算规则
2. CSS选择器笔记
3. Selectors MDN
4. CSS3 选择器——基本选择器
5. CSS3 选择器——伪类选择器
6. 征服高级CSS选择器
关于CSS选择器,首先请看这里: CSS 选择器参考手册
通过以上,我们可以将CSS选择器分为以下几种:
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
示例:
说明:以下E表示元素,attr表示属性,val表示属性的值。
说明:以下E表示元素
示例:
示例:
示例:
示例:
E:not(s) ,匹配不符合当前选择器的任何元素
示例:
E:target ,匹配文档中特定"id"点击后的效果
示例:
这里我们简单讨论下后代元素选择器和子元素选择器的区别
示例
CSS优先级是指CSS样式在浏览器中被解析的 先后顺序 。
多重样式(Mutiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是多重样式的使用情况。
一般情况下,( 外部 样式)External style sheet <( 内部 样式)Internal style sheet <( 内联 样式)Inline style
例外 :如果外部样式放在内部样式的后面,则外部样式将会覆盖内部样式。
示例:
给不同的选择器分配不同的权值
解释:
示例
结果:标签内的数据显示为蓝色。
比较样式的优先级是,只需统计不同选择器的个数,然后与对应的权值相乘即可。根据结果便可得出优先级。
看到这里,有些同学是不是对!important有点迷惑呀 为什么有了它,就优先级最高呐 下面我们再来详细讲一讲!important~
!important 是CSS1就定义的语法,作用是提高指定样式的应用优先权。
语法格式: {cssRule !important} ,即写在定义的最后面,例如: box { color: red !important}
声明了 !important 的样式,具有最高的优先级,相当于写在最下面(最后定义)
IE 6.0 不完全 支持!important
IE支持重定义中的!important,例如:
你将会发现定义了样式 class="yuanxin" 时,在IE下,字体显示为红色(#e00)。
但不支持同一定义中的 !important 。例如:
此时在IE6下不支持,你将会发现定义了样式 class="yuanxin" 时,字体显示为黑色(#000)。
解释 :
important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里),IE 6.0认为!important优先级较高,否则当含!important的样式属性被同一个{}里的样式覆盖时,IE 6.0认为!important较低!
再举一个例子:
因为IE 6.0一直都不完全支持这个语法,而其他的浏览器都支持。因此我们就可以利用这一点来分别利用!important,我们可以针对IE和非IE浏览器设置不同的样式,只要在非IE浏览器样式的后面加上!important。
完。
总结内容参考以下:
w3school_CSS 选择器参考手册
阮一峰_CSS选择器笔记
css选择器优先级深入理解
CSS 的优先级机制[总结]
十分感谢你们的分享 n(*≧▽≦*)n
注:原文章首发于: CSS选择器、优先级以及!important知识总结 ,现迁移至此。
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>