css定义的权重

以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:

/*权重为1*/
        div{
        }
        /*权重为10*/
        .class1{
        }
        /*权重为100*/
        #id1{
        }
        /*权重为100+1=101*/
        #id1 div{
        }
        /*权重为10+1=11*/
        .class1 div{
        }
        /*权重为10+10+1=21*/
        .class1 .class2 div{
        }

如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现

时间: 2024-08-06 07:58:50

css定义的权重的相关文章

CSS选择器的权重与优先规则

我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先. 那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法: 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器

CSS选择器的权重与优先规则?

我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源.这个过程就称为层叠.——<css权威指南> 如下图,css规则由选择器和声明块组成,写在选择器后面大括号里的就叫声明. 一.样式类型1.行间 <h1 style="font-size:12px;col

CSS选择器的权重与优先规则(转)

CSS选择器的权重与优先规则在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先. 从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符.important的权重为1000 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等

CSS选择器的权重计算

什么是CSS选择器权重? 即使在不太复杂的样式表中,要寻找同一元素可能有两个或者更多规则,当同一元素被多个不同来源的样式规则设置了样式后,如何处理样式规则的冲突,显示元素最后的样式,用到的计算规则就是CSS选择器的权重规则. 根据选择器的特殊性决定规则的次序.具有更特殊选择器的规则优先于具有一般选择器的规则.如果两个规则的特殊性相同,那么后定义的规则优先. 特殊性 为了计算规则的特殊性,给每种选择器都分配一个数字值.然后,将规则的每个选择器的值加在一起,计算出规则的特殊性.特殊性的计算不是以10

从webkit内核简单看css样式和css规则优先级(权重)

目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1.StyleRuleBase类: 单个的样式规则(选择器+规则体) 2.StyleSheetContents类: 样式规则集,其成员-m_childRules是一个StyleRuleBase实例的列表,是1:n的数量关系 3.CSSStyleSheet类: 成员-m_contents是一个StyleSheetContents实例,

Css伪类权重

css样式的权重计算在css中有很重要的作用,会影响很多样式的显示, css的权重按标签,class,id,inlinecss的权重分别是1,10,100,1000,还有一种就是!important, important是权重最高的,它的权重比内联样式还高. 上面这些都是大家很容易知道,今天我们要讨论的是伪类的权重 css中的伪类有:hover,visited,focus,active等,这些伪类的权重该怎么考虑呢. 看下面的例子: <html> <head> <style

[2016-01-16][CSS][定义样式表(样式选择器)]

Class 定义:.classname{ 属性:属性值;} 使用:<p class = "classname"></p> ID 定义: #IDNUM{ 属性:属性值; } 使用:<p id = "IDNUM"></p> 组合选择器 定义:标记1,标记2...标记n{属性:属性值;} 使用:直接正常使用上面存在标记即可 伪选择器 calss的使用 ID的使用 组合选择器h1 h2 h3 伪选择器 1 2 3 4 5 6

CSS选择器的权重关系

切记CSS选择器的权重关系,避免在页面中出现CSS样式无法生效的情况~ – 内嵌 id class 元素 – a b c d 内嵌 1 0 0 0 id 0 1 0 0 class.属性.伪类 0 0 1 0 元素.伪元素 0 0 0 1 通配符* 0       !improtant(写在声明中,更改权重值) 最高       a组数值只有把CSS写进style属性时才会为1,否则为0: b组数值决定于ID选择器,有多少ID选择器,并会进行此数组值累加: c组数值决定于类选择器,有多少类选择器

CSS定义字体间距 字体行与行间距

CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性 属性含义 属性值 Word-spacing 定义了各个单词之间的间距 Normal<length>必须以长度为单位 Letter-spacing    定义了每个字母之间的间距 同上 Text-decoration 定义文字的"装饰"样式 None|underline|overline| line-through|blin