CSS样式定义多了,常常出现显示效果与预期不一致的情况。其中很大一部分原因在于起作用的样式。
1.多个选择器可能会选择同一个元素,有3个规则,从上到下重要性降低:
!important的用户样式
!important的作者样式
作者样式
用户样式
浏览器定义的样式
2.
CSS规范为不同类型的选择器定义了特殊性权重,特殊性权重越高,样式会被优先应用。
权重设定如下:
html选择器,权重为1;
类选择器,权重为10;
id选择器,权重为100;
这里还有一种情况:在html标签中直接使用style属性,这里的style属性的权重为1000;
即如下情况:
#x34y {color:red}
<. p id=x34y style="color:green"> 优先选择style=""设定的样式。
例子:
h1{color:blue} 权重为1
p em{color:yellow} 权重为2
.warning{color:red} 权重为10
p.note em.dark{color:grag} 权重为22
#main{color:black} 权重为100 这里还有一种情况:
权重一样时如何处理?
3.CSS样式的层叠原则——谁离我近,谁说了算。
当权重一样时,会采用“层叠原则” 后定义的会被应用。
如:p{color:yellow}
p{color:red}
作用到这里 <. p >我的什么颜色呢?< /p>
结果会是red的。
4.CSS样式的特殊标记——谁有特权,谁说了算。
如果有人看不顺眼,非得要自己说了算,那可以搞点特权,如下即可
p {color:blue !important;}
加上!important;可将自己权重设为最高。
分享到:
相关推荐
主要介绍了关于CSS选择器优先级的判断并附结果截图,需要的朋友可以参考下
主要帮助大家深入理解CSS选择器优先级的相关内容,通过八个小例子分析比较CSS选择器优先级,感兴趣的小伙伴们可以参考一下
css基础选择器有标签选择器、类选择器、id选择器、通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友,带来些许帮助
声明在样式表或文档中越靠后出现,权重越大。如果样式表中有通过 @import 导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表的所有声明在后。
通过使用组合器(Combinator)将选择器的描述写得更加精确(参考CSS选择器 – MDN ),例如对于下述代码片段,如果想给.cellphones中的.apple增加样式,只使用.apple,势必会对.fruit中的.apple也造成影响。...
CSS标签选择器优先级.pdf
CSS中选择器优先级顺序实战讲解.pdf
介绍CSS中,单个选择器,以及复合选择器的权重计算规则,比如: .box #mydiv ul li.txt。通过计算选择器的权重,区别其优先级,判 断最终样式的覆盖效果。
CSS选择器优先级得关系为: !important>内联>ID选择器>类选择器>标签选择器。 一种优先级算法 内联样式表的权值最高 (style=””) 权值为1000 统计选择符中的ID属性个数。(#id) 权值为100 统计选择符中的CLASS属性...
CSS入门源代码 CSS其他选择器(上) CSS其他选择器(下) css选择器 css选择器优先级 css样式设置 列表样式 使用外部样式表 伪类分类 伪类样式 伪元素选择器 文本类样式 字体类样式
CSS在使用选择器对元素施加属性的时候会有先后顺序,包括特殊性和重要性等概念在内,这里我们就来详解CSS中的选择器优先级顺序,需要的朋友可以参考下
2. css 选择器优先级? !important > 行内样式(比重1000)> ID 选择器(比重100) > 类选择器(比重10) > 标签(比重1) > 通配符 > 继承 > 浏览器默认属性 3. 垂直居中几种方式? 单行文本: line-height = ...
可是,我们经常看到带有元素名称的选择器,例如,在微软的项目模板中就有大量的带有元素名称的选择器,如果没有用的话,为什么要这样写呢?哈哈哈,这么写是有原因的,下面就带大家一起看一下! CSS Code复制内容到...
CSS选择器 xmind - 选择器分类(ID选择器,类选择器,标签选择器,通配选择器,属性选择器,伪类选择器)。 - 选择器关系(分组,后代,子元素,相邻兄弟,后续兄弟)。 - CSS特性(优先级,继承,层叠)。
这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结。 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择...
ID选择器(形如#id{}) 类选择器(形如.class{}) 标签选择器(形如body{}或者*{}),也就是ID选择器,类选择器,标签选择器中,ID选择器的优先级最高,标签选择器最低; 选择器越具体优先级就越高,也就是 ....