`
zym_nanako
  • 浏览: 85017 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS样式使用优先级判断

    博客分类:
  • web
阅读更多
CSS样式定义多了,常常出现显示效果与预期不一致的情况。其中很大一部分原因在于起作用的样式。

1。多个选择器可能会选择同一个元素,有3个规则,从上到下重要性降低:
      !important的用户样式
      !important的作者样式
      作者样式
      用户样式
      浏览器定义的样式
2。CSS样式的特殊性权重——谁有分量,谁说了算。
CSS规范为不同类型的选择器定义了特殊性权重,特殊性权重越高,样式会被优先应用。
权重设定如下:
html选择器,权重为1;
类选择器,权重为10;
id选择器,权重为100;
这里还有一种情况:在html标签中直接使用style属性,这里的style属性的权重为1000;
即如下情况:
#x34y {color:red}
<.  p id=x34y >  优先选择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;可将自己权重设为最高。
如果你要问两个!important;设定的样式,那个样式说了算,我说你为什么不自己试试看看呢!

分享到:
评论
1 楼 huyiho0311 2011-03-02  

相关推荐

    关于CSS选择器优先级的判断题附结果截图

    在CSS(层叠样式表)中,选择器的优先级是决定哪些样式将应用于元素的重要因素。当多个选择器都尝试设置同一个属性时,优先级较高的规则会覆盖优先级较低的规则。理解CSS选择器优先级是编写高效、可维护CSS代码的...

    浏览器如何判断css优先级

    概念浏览器是通过判断优先级,来决定到底哪些属性值是与元素最相关的,从而应用到该元素上。优先级是由选择器组成的匹配规则决定的。 如何计算?优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个...

    CSS 优先级 详细分析

    优先级的判断依据主要包括选择器的特殊性(Specificity)和样式声明的来源。具体来说,CSS选择器的特殊性由四个部分组成: 1. ID选择器(如#someid):每个ID选择器赋予100分。 2. 类选择器(如.someclass)、属性...

    css样式优先级及层叠的顺序排序探讨

    综上所述,CSS样式优先级的判断基于选择器的特殊性和声明顺序,`!important`规则可以强制提升优先级。理解这些规则对于精确控制元素的样式显示至关重要。在开发过程中,合理地利用优先级和层叠可以帮助避免不必要的...

    css优先级计算方法(推荐)

    主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系。 如果将这五种不同情况的优先级以数字的形式来表示的话,其对应关系如下...

    CSS 优先级问题详解

    CSS优先级是CSS样式的权重排序,它决定了当出现样式冲突时,哪一种声明会被使用。了解优先级对于前端开发者来说非常关键,它能够帮助开发者更准确地控制页面的显示效果。 要分析和确定CSS样式的优先级,我们通常...

    css样式冲突处理机制.pdf

    CSS 样式冲突处理机制是 CSS 中一个非常重要的概念,它决定了当多个样式属性应用于同一个元素时,浏览器如何确定哪一个样式属性优先级最高。这个机制的核心是 Cascade,也就是层叠样式表的缩写。 在 CSS 中,我们...

    CSS优先级的相关知识详细介绍

    当出现样式冲突时,浏览器会根据特异性来判断使用哪一个样式声明。特异性从左到右逐位比较,高者优先。 例如,如果一个样式由一个ID选择器和一个元素选择器组成,其特异性为101;如果另一个样式仅由三个类选择器...

    CSS层叠样式表.pdf

    优先级提升的方式包括使用内联样式、ID选择器和类选择器。对于优先级的判断,可以通过权重计算或者“越具体越好”来决定最终效果。 在CSS中,有多种方式插入样式表,包括内部CSS(即内联样式)、外部CSS以及行内CSS...

    详解CSS样式中的!important、*、_符号

    important、*和_在CSS中均与样式的优先级有关,但在实际的网页设计和开发中,为了保持代码的可维护性和兼容性,我们更推荐使用CSS预处理器、JavaScript以及现代的CSS特性如Flexbox和Grid布局等来处理样式的优先级和...

    CSS优先级算法如何计算?有哪些判定规定及计算方式

    通过这种计算方法,开发者可以更精确地控制CSS样式的应用,确保页面的展示效果符合预期。在日常开发中,合理使用特异性值来决定样式的优先级,可以有效避免样式的冲突和意外的覆盖。了解并熟练掌握特异性计算规则...

    CSS设计指南(第3版) 及代码

    层叠规则解释了如何在多个样式之间进行优先级判断,确保正确应用样式。 其次,书中涵盖了布局技术,包括盒模型、定位和流体布局。盒模型是理解CSS布局的基础,它包括内容、内边距、边框和外边距。通过理解盒模型,...

    我的练习之css

    其“层叠”特性意味着可以有多个样式来源,如内部样式、外部样式表、内联样式等,它们会按照特定规则进行合并和优先级判断。 3. **多媒体标签**: HTML5引入了新的多媒体标签,如`&lt;audio&gt;`和`&lt;video&gt;`,用于直接在...

    CSS-CSS属性速查表

    important`是一个用于增强CSS规则优先级的关键字,当与样式属性值结合使用时,它将提高该属性值在层叠中的权重,使其优先于其他同名属性值。 #### :active `:active`伪类用于选择处于激活状态的链接,即当用户按下...

    CSS+HTML详解

    1. **内联样式**:直接在HTML元素中使用`style`属性添加CSS样式,但不推荐,因为不利于代码复用和维护。 2. **内部样式表**:将CSS写入`&lt;style&gt;`标签内,置于`&lt;head&gt;`中,适用于整个页面的样式统一。 3. **外部...

    css 学好的口诀

    2. **实现跨浏览器兼容性**:不同的浏览器对CSS特性的支持程度不同,可以通过检测用户代理(User Agent)来判断浏览器类型,并针对性地调整样式。例如,使用Modernizr库来检测浏览器特性。 3. **解决响应式设计中的...

    css20.chm 帮助文档

    CSS性能优化涉及减少样式重绘和回流、合并CSS请求、使用适当的选择器以及优化关键渲染路径等方面。了解这些技巧能提升网站加载速度,改善用户体验。 十、浏览器兼容性 由于不同的浏览器对CSS支持程度不一,开发者...

    延迟加载JS/CSS

    对于CSS,可以将非首屏的样式定义在媒体查询中,或使用类似 technique 的懒加载库。 2. **JavaScript延迟加载**:lazyload.js 文件可能是一个实现延迟加载功能的JavaScript库。它通常通过监听滚动事件来判断元素...

    DIV+CSS布局大全

    9. **CSS权重**:理解选择器的权重对优先级的判断非常重要,权重决定了哪个样式会被应用到元素上。 10. **浏览器兼容性**:虽然现代浏览器对CSS的支持已经很好,但处理老版本浏览器的兼容性问题仍然是一个挑战。...

Global site tag (gtag.js) - Google Analytics