CSS样式id和class属性优先级问题的比较
2016-01-04 20:39
561 查看
在DIV+CSS设计网页时, 总会碰到一些CSS属性优先级问题. 如果不清楚优先级的等级, 直接想当然的认为应该是这样, 就很容易出错. 这里分析一个本人碰到的问题, 学习一下属性优先级问题.
下面是代码测试代码:
<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 > 继承的属性
按同样的顺序
下面是代码测试代码:
<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样式
- CSS3制作精美的iphone电话图标,不使用图片
- BaseProject中的主题样式
- Webkit内核探究【2】——Webkit CSS实现
- html(一)css及基本标签的简介
- W3School-CSS 尺寸 (Dimension) 实例
- 织梦翻页分页css代码案例分享(转载)
- 禁用iPhone手机浏览器上给电话号码自动加上的link样式
- 获取css外部样式的方法及兼容代码
- CSS样式定义的优先级顺序总结
- CSS3.0盒模型display:-webkit-box;的使用
- allMrtBoot.css 网盘中
- html+css学习笔记
- 使用自定义透明Dialog样式的Activity
- css 笔记——设置禁用中文输入法
- CSS深入理解vertical-align和line-height的基友关系
- css/3 背景详解
- W3School-CSS 轮廓(Outline)实例
- CSS——优先级
- [No00007B]DreamweaverCC 的CSS代码格式化