CSS中选择器的优先级
来源:互联网 发布:人工智能入门书籍 编辑:程序博客网 时间:2024/03/29 13:11
选择器优先级的一些问题
#Box div{ color:red;}.important_false{ color:blue;}.important_true{ color:blue !important;}
<div id="Box"> <div class="important_false">这一行末使用important</div> <div class="important_true">这一行使用了important</div></div>
这种情况下,显示为
去掉#Box中的div,显示为
首先CSS的优先级顺序: tag中的style > id > class > tag > 继承的属性 按同样的顺序
#Box div 情况下:id+tag>class所以显示红色
#Box 情况下: 则按照越靠近优先级越高原则 ,所以显示蓝色
当父元素和子元素设置相同的样式时,继承的 权重很小,有的浏览器认为他是0.1,所以不加div显示蓝色,加上div时,显示红色。
另一测试代码
<style type="text/css">
<!–
#div1 ul li{ list-style: square;}
.div2class ul li{ list-style:none;}
–>
</style>
<div id="div1" class="div1class">
<div id="div2" class="div2class">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
上面代码本意是通过想通过div2class来去掉li前面定义的点, 按照越靠近优先级越高原则, 应该是应用 .div2class 中的定义, 但实际情况方点并没有去掉. 并没有应用 .div2class 还是按照 #div1 中的设置显示. 这证明 id 的优先级要高于 class.
总结一点经验就是: 通过继承来的属性 id 的优先级高于 class
CSS的优先级顺序: tag中的style > id > class > tag > 继承的属性 按同样的顺序
- css中选择器的优先级
- CSS中选择器的优先级
- CSS中选择器优先级
- 关于css中选择器优先级的总结
- css选择器&选择器的优先级
- CSS选择器的优先级
- CSS选择器的优先级
- CSS 选择器的优先级
- css选择器的优先级
- CSS的选择器,优先级
- CSS选择器的优先级
- css选择器的优先级
- CSS选择器的优先级
- css选择器的优先级
- css选择器的优先级
- CSS选择器的优先级设定
- css选择器的优先级比较
- css 引入方式,选择器,选择器的优先级
- Qt技巧:Error LNK2019解决办法
- 回流(reflow)与重绘(repaint)
- Redis一致性hash(php版)
- apache和nginx开启https
- javaee中servlet-jar中类找不到
- CSS中选择器的优先级
- 文字内容溢出用点点点(…)省略号 在不同浏览器里的 显示位置问题
- Qt Widgets、QML、Qt Quick的区别
- 【原创】MyEclipse反编译添加jadclipse_3.3.0 曲折的完美解决
- numpy的ndarray学习笔记
- JavaScript当当网我的订单切换我的团购订单动态切换效果
- HTTP学习(一) HTTP基本知识
- HDU1171 Big Event in HDU (母函数)
- 安装python插件 pandas,matplotlib 等及问题