关于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>
1、css() 方法设置或返回被选元素的一个或多个样式属性。2、val() 方法返回或设置被选元素的值。
3、attr() 方法设置或返回被选元素的属性值。
4、addClass() 方法向被选元素添加一个或多个类。
5、html() 方法返回或设置被选元素的内容 (inner HTML)。
6、text() 方法方法设置或返回被选元素的文本内容。
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选择器