css 样式——后面覆盖前面

yankeys 发布于2019-08-29 14:04 / 680人阅读

摘要：实际上是谁在文件中，权重相等，声明在后面，那么最终就应用谁解释上面的说明大致意思就是，如果两个选择器的声明权重相等，那么谁在后面，最后就应用谁。

上代码

.yellow {
    background: yellow;
}

.red {
    background: red;
}

这个区域渲染出来是什么颜色呢？红色？黄色？

答案是红色

不知道有多少人和我有一样的误区，一直以为是由class中的排版顺序决定同优先级样式应用顺序的。。。

实际上是谁在css文件中，权重相等，声明在后面，那么最终就应用谁

解释

W3C 上面的说明
https://www.w3.org/TR/CSS2/cascade.html#cascading-order

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

大致意思就是，如果两个选择器的声明权重相等，那么谁在后面，最后就应用谁。

GPU服务器私有云覆盖样式 css样式页面css样式 css的样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112905.html

CSS学习摘要-层叠和继承

摘要：类选择器具有更高的专用性，所以将战胜元素选择器。个位在整个选择器中每包含一个元素选择器或伪元素就在该列中加分。选择器六明显地输给了了五，其专用性值为和它在链中少了一个元素选择器。当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？其实这是通过层叠机制来控制的，这也和样式继承(元素从其父元素那里获得属性值)有关。元素的最终样式可以在多个地方定义，它们以复杂的形式相互影响。这些复杂...

mating 2019-04-23 13:40 评论0 收藏0
利用javascript获取并修改伪元素的值

摘要：利用方法选择到伪元素，然后利用方法获取对应的属性的值。具体用法可以参考的这篇文章而伪元素的属性值除了常规赋值外，还有一种特殊的方法来获取。具体实现参照，不再做具体分析参考文献获取元素值之方法熟悉虽然标题里写的是伪元素,不过这篇文章主要是说::before和::after，其余几个伪元素（::first-letter、::first-line、::selection等)由于没有cont...

SQC 2019-08-22 10:57 评论0 收藏0
Vue:scoped与module的使用与利弊

摘要：一个应用是离不开与，其中充斥的整个项目中。下面我会分别对与解决方案进行说明，最后在分析它们的利弊与选择。不过一个子组件的根节点会同时受其父组件有作用域的和子组件有作用域的的影响。但它的局限性是适用于中小项目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一个web应用是离不开html、css与js，其中css充...

zhoutk 2019-08-30 15:55 评论0 收藏0
Vue:scoped与module的使用与利弊

摘要：一个应用是离不开与，其中充斥的整个项目中。下面我会分别对与解决方案进行说明，最后在分析它们的利弊与选择。不过一个子组件的根节点会同时受其父组件有作用域的和子组件有作用域的的影响。但它的局限性是适用于中小项目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一个web应用是离不开html、css与js，其中css充...

zr_hebo 2019-08-23 14:56 评论0 收藏0
Vue:scoped与module的使用与利弊

摘要：一个应用是离不开与，其中充斥的整个项目中。下面我会分别对与解决方案进行说明，最后在分析它们的利弊与选择。不过一个子组件的根节点会同时受其父组件有作用域的和子组件有作用域的的影响。但它的局限性是适用于中小项目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一个web应用是离不开html、css与js，其中css充...

missonce 2019-08-02 14:10 评论0 收藏0