欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > CSS >内容正文

CSS

CSS的优先级和继承性

发布时间：2025/4/5 CSS 58 豆豆
生活随笔 收集整理的这篇文章主要介绍了 CSS的优先级和继承性 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1、优先级是指如果多个选择器作用于同一个元素时，CSS的处理规定；
2、对于优先级CSS总的原则是：越特殊的样式，优先级越高；
3、具体的说，优先级规则是：!important>行内样式>ID样式>类别样式>标记样式，可参考下图：


4、通过优先级规则我们可以知道：如果子元素定义的样式和父元素定义的样式冲突，则以子元素自己的样式为准；如果没有发生冲突，则子元素则继承父元素的样式风格；
5、特别的，继承来的样式的优先级要比元素具有的默认优先级低，如下面这个例子：

1 <style type="text/css" > 2 /*body标记选择器*/ 3 body{ 4 text-align: center; 5 font-size: 12px; 6 text-decoration: underline; 7 } 8 /*em标记选择器*/ 9 em{ 10 font-weight: bold; 11 font-size:30px; 12 color: red; 13 } 14 /*自定义了一个名为right的类选择器*/ 15 .right{ 16 text-align: right; 17 color: green; 18 font-weight: bold; 19 } 20 </style> 21 22 <body> 23 <h2>重视大脑的学习指南</h2><!--因<h2>标记自己有关于字体大小的样式，所以没有继承<body>标记关于字体大小的12px规定--> 24 <p>网页设计之CSS</p><!--完全继承了父元素<body>选择器的样式--> 25 <p><em>从零开始</em>学习网页设计</p><!--“从零开始”以自身的<em>标记选择器的样式为准，而“学习网页设计”继承了父元素<body>选择器的样式--> 26 <p class="right">CSS的优先性和继承性</p><!--自定义的样式选择器，优先级高于标记选择器--> 27 </body>

转载于:https://www.cnblogs.com/roytanlu/archive/2012/05/01/2477575.html

总结

以上是生活随笔为你收集整理的CSS的优先级和继承性的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。