css优先级如何计算

本文小编为大家详细介绍“CSS优先级如何计算”，内容详细，步骤清晰，细节处理妥当，希望这篇“css优先级如何计算”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　下面是一个简单的无序列表：

　　<ulid="summer-drinks">

　　<li>汽水</li>

　　<li>啤酒</li>

　　<li>果汁</li></ul>

　　如果现在你要指定其中一种你喜欢的饮料并改变它的样式。你可以通过list元素上的类名来应用它。

　　<ulid="summer-drinks">

　　<liclass="favorite">汽水</li>

　　<li>啤酒</li>

　　<li>果汁</li></ul>

　　现在你就可以在css中为它添加样式

　　.favorite{

　　color:red;

　　font-weight:bold;

　　}

　　然后你看你的实现效果会发现这个样式它没有作用！你选择添加样式的饮料并没有变成红色，字体也没有加粗

　　仔细观察css中的代码你就会发现，有两个选择器

　　ul#summer-drinksli{

　　font-weight:nORMal;

　　font-size:12px;

　　color:black;}

　　两个不同的CSS选择器都定义了文本颜色和字体重量。字体大小只有一个声明，所以很明显一个会生效。这些不是“冲突”，但浏览器确实需要决定这些定义了的内容中需要实现哪一个。这就需要通过遵循一套标准的优先级规则来实现。

　　这可能会让一些初学者感到困惑，因为他们尚未完全解决这个问题。他们可能会认为因为.favorite语句“在CSS中更进一步”，或者因为class=“favorite”在html中“更接近实际文本”，将是优先的。实际上，CSS中选择器的顺序确实发挥了作用，当优先级完全相同时，后来定义的内容实际上是先执行的，例如：

　　.favorite{

　　color:red;

　　}

　　.favorite{

　　color:green;

　　}

　　执行的结果字体的颜色会变绿

　　这里的要点是你希望尽可能具体的理解。即使有上面提到的简单例子，最终你会明白，仅仅使用一个类名来定位“最喜欢的饮料”并不会削减它，或者即使它确实起作用也不会很安全。可以使用以下方法具体定义：

　　ul#summer-drinksli.favorite{

　　color:red;

　　font-weight:bold;

　　}

　　这就是我所说的“具体而言才有意义”。你实际上可能更具体，并使用这样的东西：

　　htmlbodydiv#pagewrapul#summer-drinksli.favorite{

　　color:red;

　　font-weight:bold;

　　}

　　但有时候代码会很长。它会使的CSS代码的阅读性降低，并没有产生任何实际好处。为“.favorite”类提取特异性值的另一种方法是使用！important声明。

　　.favorite{

　　color:red!important;

　　font-weight:bold!important;

　　}

　　我曾经听说过！important是CSS的绝地思维技巧。也确实如此，您可以通过使用它来强制您的元素样式。但是，通过大幅提高特定选择者使用的特殊性，将会产生一些不必要的问题。如果被错误理解，那么！important声明很容易被滥用。它最好用于保持CSS整洁，例如，您知道具有特定类选择器的元素应该使用某种样式集。相反，不仅仅用作快速的使用方法来覆盖某些东西的样式，而不是弄清楚原始作者如何构造和使用CSS。

　　我的一个经典例子是：

　　.last{

　　margin-right:0!important;

　　}

　　计算CSS选择器优先级

　　为什么我们第一次尝试更改颜色和字体重量失败了？正如我们所了解的那样，这是因为简单地使用类名本身具有较低的优先级，并且被另一个选择器覆盖，该选择器使用ID值定位无序列表。该句中的重要词语是类和id。CSS对类和ID应用了截然不同的优先级权重。事实上，ID具有无限的优先级价值！也就是说，没有任何类别的优先级可以超过ID。

读到这里，这篇“css优先级如何计算”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网VUE频道。