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,如需转载请自行联系原作者
相关文章
|
1月前
|
前端开发 算法
CSS语言的层叠和优先级
CSS语言的层叠和优先级
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
29 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
27 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
1月前
|
前端开发 算法
CSS 选择器的优先级算法
在CSS中,选择器的优先级由四个级别和各级别的出现次数决定**。这四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符,优先级依次降低。
|
6天前
|
前端开发
|
9天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
1月前
|
JavaScript 前端开发
如何在 Vue 中进行样式绑定和scoped CSS?
如何在 Vue 中进行样式绑定和scoped CSS?
15 0
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
22 0
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 017 HTML样式
编程笔记 html5&css&js 017 HTML样式