CSS样式的优先级

简介:
------------------------------------------------------------------------
           |      最次要          |        <---->        |    最重要
------------------------------------------------------------------------
样式生成于: |  浏览器的默认样式表    |  用户自己定义的样式表    |  页面开发者样式表
------------------------------------------------------------------------
样式生成于: |  外部样式表           |  内部样式表           |  内联样式表
------------------------------------------------------------------------
样式生成于: |  元素选择器           |  类选择器             |  ID选择器
------------------------------------------------------------------------

当样式冲突时, CSS中同意使用!important指明样式具有更高的优先级

p{color:blue; !important}

 

1. 影响页面中元素的位置的属性,或者像margin,background color,border这些属性是不继承的。

2. 浏览器自己定义的一些元素的样式。如link为蓝色的。headline的字体等等。

3. 当css样式冲突时,继承的不会被採用。

 

第三条事实上指明了css样式应用的还有一个规律:The Directly Applied Style Wins。

当样式存在冲突时,直接运用的样式会被採用。就继承冲突而言还存在还有一条规律:Nearest Ancestor Wins。

 

这里再讨论下one tag。 many styles的情况,比方:对于一个元素<p>我们既设置了id selector style又设置了class selector style,这样的情况下。如style不存在冲突,所设置的样式会组合起来运用到元素上。

如存在冲突,css提供了一个公式去模拟优先级:

  • A tag selector is worth 1 point .

  • A class selector is worth 10 points .

  • An ID selector is worth 100 points .

  • An inline style is worth 1000 points .





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5153607.html,如需转载请自行联系原作者
相关文章
|
12月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
6月前
|
前端开发
|
10月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
11月前
|
前端开发 JavaScript UED
|
12月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
1347 1
|
12月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
208 2
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
547 1
|
11月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。