关于CSS样式的优先级问题

yanwei 发布于2019-08-29 14:15 / 1217人阅读

摘要：在中，你可以为同一个标签定义多个样式，如下面的例子这么多的样式，哪个是有效的呢我们一个一个把上面的样式删除，在浏览器中可以看到的优先级最高，然后是，再来是，最后才是另外，使用可以改变优先级别为最先，如下将会显示为即优先级变为

在CSS中，你可以为同一个标签定义多个样式，如下面的例子：

#aaa{
background-color: Fuchsia;
}
.ab{
background-color: Black;
}
td{
background-color: Aqua ;
}

这么多的样式，哪个是有效的呢？我们一个一个把上面的样式删除，在浏览器中可以看到： style的优先级最高，然后是id，再来是class，最后才是td 另外，使用!important可以改变优先级别为最先，如下：

#aaa{
background-color: Fuchsia;
}
.ab{
background-color: Black;
}
td{
background-color: Aqua !important;
}

td将会显示为Aqua 即优先级变为td，然后是style，再来是id，最后是class

欢迎来讨论：http://www.webprep.cn/

GPU云服务器云服务器关于样式的 css的样式 html的css样式关于javascript的问题

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

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

关于CSS你应该知道的基础知识 - 样式应用篇

摘要：我是红色这种引用代码的方式在一定程度上解决了所有代码都分散写在各个元素上的问题，但是不利于代码的整体重用。需要详尽选定该元素来设置具体的样式。子元素会继承父元素的样式，等除外。上一篇简单总结了一下选择器，如果一个元素被多个选择器选中，元素的样式就会以级联方式被应用到。要搞清最终那个样式被应用到元素上了，首先要明白引用CSS代码的几种方式。 CSS代码引用方式如何应用CSS代码到Ht...

fxp 2019-08-30 14:24 评论0 收藏0
关于CSS你应该知道的基础知识 - 样式应用篇

摘要：我是红色这种引用代码的方式在一定程度上解决了所有代码都分散写在各个元素上的问题，但是不利于代码的整体重用。需要详尽选定该元素来设置具体的样式。子元素会继承父元素的样式，等除外。上一篇简单总结了一下选择器，如果一个元素被多个选择器选中，元素的样式就会以级联方式被应用到。要搞清最终那个样式被应用到元素上了，首先要明白引用CSS代码的几种方式。 CSS代码引用方式如何应用CSS代码到Ht...

Michael_Lin 2019-08-02 10:10 评论0 收藏0
CSS学习笔记(十六) CSS最佳实践之可维护性篇

摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。前言 CSS代码难维护众所皆知。为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现；作用于某个元素上的样式又可能来自单个样式规...

newtrek 2019-08-28 18:21 评论0 收藏0
CSS学习笔记(十六) CSS最佳实践之可维护性篇

摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。前言 CSS代码难维护众所皆知。为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现；作用于某个元素上的样式又可能来自单个样式规...

keke 2019-08-01 14:55 评论0 收藏0