css样式优先级顺序是什么
这篇文章主要讲解了“css样式优先级顺序是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css样式优先级顺序是什么”吧！
成都创新互联公司致力于互联网品牌建设与网络营销，包括成都网站制作、成都网站建设、外贸营销网站建设、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。成都创新互联公司为不同类型的客户提供良好的互联网应用定制及解决方案，成都创新互联公司核心团队十年专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。
更好地理解哪些css样式优先使用可以更清晰更有组织的来写css代码，所以让我们看看控制给定html元素的三个css规则：
css优先级计算
css继承
css层叠
学习这些规则将使您的CSS开发更上一层楼。
优先级计算
想象一下，你的html包含一个应用了一类“生物”的段落。您还有以下两个css规则：
p{font-size：12px}
p.bio{font-size：14px}
你希望段落中的文字大小是12px还是14px？在这种情况下你可以猜测它将是14px。css（p.bio）的第二行比你的class=“bio”段更具体。然而，有时优先级并不容易看到。
例如，考虑以下html和css
divp.bio{font-size：14px}
#sidebarp{font-size：12px}
乍一看，第一行css可能看起来更具体，但实际上上面的第二行更符合段落的字体大小。这是为什么？
要回答这个问题，我们需要考虑优先级规则。
通过计算css的各种成分并以（a，b，c，d）形式表达它们来计算特异性。这将通过一个例子更清楚，但首先是组件。
元素，伪元素：d=1-（0,0,0,1）
类，伪类，属性：c=1-（0,0,1,0）
Id：b=1-（0,1,0,0）
内联样式：a=1-（1,0,0,0）
id比类更具体而不是元素。
您可以通过计算上述每一项并将a，b，c或d加1来计算优先级。同样重要的是要注意0,0,1,0比0,0,0,15更具体。让我们看一些例子来使计算更清晰。
p：1个元素-（0,0,0,1）
div：1个元素-（0,0,0,1）
#sidebar：1个id-（0,1,0,0）
div＃sidebar：1个元素，1个id-（0,1,0,1）
div＃sidebarp：2个元素，1个id-（0,1,0,2）
div＃sidebarp.bio:2个元素，1个类，1个id-（0,1,1,2）
让我们再看一下上面的例子
divp.bio{font-size：14px}-（0,0,1,2）
#sidebarp{font-size：12px}-（0,1,0,1）
第二个具有更高的优先级，因此优先。
在我们前进之前的最后一点。重要性胜过优先级，当你使用！important标记css属性时，你会覆盖优先级规则等等
divp.bio{font-size：14px！important}
#sidebarp{font-size：12px}
表示上面的第一行css优先于第二行而不是第二行。！important仍然是围绕基本规则的特殊性，如果您了解规则的运作方式，您应该永远不需要。
继承
继承背后的想法相对容易理解。元素从其父容器继承样式。如果将body标签设置为使用color：red，那么除非另有说明，否则正文中所有元素的文本也将为红色。
但是，并非所有css属性都是继承的。例如，边距和填充是非继承属性。如果在div上设置边距或填充，则div内的段落不会继承您在div上设置的边距和填充。该段落将使用默认的浏览器边距和填充，直到您另外声明。
但是，您可以显式设置属性以从其父容器继承样式。例如，您可以声明
p{margin：inherit;填充：继承}
然后你的段落将从它的包含元素继承。
层叠
在最高级别，层叠是控制所有css优先级的，并且如下工作。
1、查找适用于相关元素和属性的所有css声明。
2、按原点和重量排序。Origin指的是声明的来源（作者样式，用户样式，浏览器默认值），权重指的是声明的重要性。（作者的权重大于用户的权重大于默认值。！important比正常声明更重要）
3、计算优先级
4、如果上述所有规则中的两个规则相同，那么最后一个规则获胜。嵌入在html中的CSS总是在外部样式表之后，而不管html中的顺序如何。
上面的＃3很可能是你最需要注意的。使用＃2只需了解您的样式将覆盖用户设置浏览器的方式，除非他们将规则设置为重要。
还要意识到您的样式将覆盖浏览器默认值，但这些默认值确实存在，并且通常会导致跨浏览器问题。使用重置文件，如EricMeyer的CSS重置或Yahoo的YUI重置CSS有助于将默认样式排除在等式之外。
感谢各位的阅读，以上就是“css样式优先级顺序是什么”的内容了，经过本文的学习后，相信大家对css样式优先级顺序是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
文章名称：css样式优先级顺序是什么
链接URL：http://ybzwz.com/article/jjopei.html
