css css2 css3_明确CSS

css css2 css3

One very fundamental and integral part of CSS is understanding specificity. Understanding this basic concept can help to make your CSS development, and more specifically (no pun intended) your troubleshooting go more smoothly.

CSS的一个非常基本的组成部分是理解特异性。 理解这个基本概念可以帮助您进行CSS开发，更具体地说(无双关语)，您的故障排除可以更加顺利进行。

Every rule in CSS has a specificity value that is calculated by the user agent (the web browser for most web development purposes), and assigned to the declaration. The user agent uses this value to determine which styles should be assigned to an element when there are more than one rule for that particular element.

CSS中的每个规则都有一个特定性值，该特定性值由用户代理(用于大多数Web开发目的的Web浏览器)计算并分配给声明。 当该特定元素有多个规则时，用户代理将使用此值来确定应将哪些样式分配给该元素。

This is a basic concept most of us have at least a general understanding of. For example, most developers can tell you that the second declaration below carries more weight than the first:

这是我们大多数人至少已基本了解的基本概念。 例如，大多数开发人员可以告诉您，下面的第二个声明比第一个声明具有更大的权重：

h1{color: blue;}
h1#title{color: red;}

If both styles are defined in the same stylesheet, any h1 with an id of ‘title’ will of course be red. But just how is this determined?

如果两种样式都在同一样式表中定义，则ID为“ title”的任何h1当然将为红色。 但是，如何确定呢？

计算特异性 (Calculating Specificity)

Specificity in CSS is determined by using four number parts. Each type of value in the style declaration receives some sort of specificity rate:

CSS的特异性是通过使用四个数字部分来确定的。 样式声明中的每种类型的值都具有某种特异性率：

• Each id attribute value is assigned a specificity of 0,1,0,0.

  每个id属性值分配的特异性为0、1、0、0。

• Each class, attribute, or pseudo-class value is assigned a specificity of 0,0,1,0.

  每个类，属性或伪类值都分配有0,0,1,0的特异性。

• Each element or pseudo-element is assigned a specificity of 0,0,0,1.

  每个元素或伪元素的特异性都指定为0,0,0,1。

• Universal selectors are assigned a specificity of 0,0,0,0 and therefore add nothing to the specificity value of a rule.

  通用选择器被指定为0,0,0,0的特异性，因此不会为规则的特异性值添加任何内容。

• Combinator selectors have no specificity. You will see how this differs from having a zero specificity later.

  组合器选择器没有特异性。 稍后您将看到它与零特异性的区别。

So going back to our previous example, the first rule has one element value, so its specificity is 0,0,0,1. The second rule has one element value and an id attribute, so its specificity is 0,1,0,1. Looking at their respective specificity values, it becomes quite clear why the second rule carries more weight.

回到前面的示例，第一个规则具有一个元素值，因此其特异性为0,0,0,1。 第二条规则具有一个元素值和一个id属性，因此其特异性为0,1,0,1。 从它们各自的特异性值来看，很清楚为什么第二条规则具有更大的重要性。

Just so we are clear on how specificity is calculated, here are some more examples, listed in order of increasing specificity:

如此一来，我们就清楚了如何计算特异性，下面列出了更多示例，以增加特异性的顺序列出：

h1{color: blue;} //0,0,0,1
body h1{color: silver;} //0,0,0,2
h1.title{color: purple;} //0,0,1,1
h1#title{color: pink;} //0,1,0,1
#wrap h1 em{color: red;} //0,1,0,2

You should also note that the numbers go from left to right in order of importance. So a specificity of 0,0,1,0 wins over a specificity of 0,0,0,13.

您还应注意，数字按重要性从左到右排列。 因此，0,0,1,0的特异性胜过0,0,0,13的特异性。

At this point, you may be wondering where the fourth value comes into play. Actually, prior to CSS 2.1, there was no fourth value. However, now the value furthest to the left is reserved for inline styles, which carry a specificity of 1,0,0,0. So, obviously, inline styles carry more weight than styles defined elsewhere.

此时，您可能想知道第四个值在哪里起作用。 实际上，在CSS 2.1之前，没有第四个值。 但是，现在最左边的值已保留给内联样式，这些样式具有1,0,0,0的特异性。 因此，显然，内联样式比其他地方定义的样式更重要。

这一点很重要 (It’s Important)

This can be changed, however, by the !important declaration. Important declarations always win out over standard declarations. In fact, they are considered separately from your standard declarations. To use the !important declaration, you simply insert !important directly in front of the semicolon. For example:

但是，可以通过！important声明来更改。 重要的声明总是胜过标准的声明。 实际上，它们与您的标准声明分开考虑。 要使用！important声明，只需在分号前面直接插入！important即可。 例如：

h1.title{color:purple !important;}

Now any h1 with a class of ‘title’ will be purple, regardless of what any inline styles may say.

现在，任何带有“ title”类的h1都将变为紫色，而不管任何内联样式可能怎么说。

没有专一性 (No Specificity)

As promised, I said I would explain the difference between no specificity and zero specificity. To see the difference, you need a basic understanding of inheritance in CSS. CSS allows us to define styles on an element, and have that style be picked up by the element’s descendants. For example:

如所承诺的，我说我将解释无特异性和零特异性之间的区别。 要了解差异，您需要对CSS中的继承有基本的了解。 CSS允许我们在元素上定义样式，并让该样式由元素的后代继承。 例如：

h1.title{color: purple;}

<h1 class="title">This is <em>purple</em></h1>

The em element above is a descendant of the h1 element, so it inherits the purple font color. Inherited values have no specificity, not even a zero specificity. That means that a zero specificity would overrule an inherited property:

上面的em元素是h1元素的后代，因此它继承了紫色字体颜色。 继承的值没有专一性，甚至没有零专一性。 这意味着零特异性将否决继承的属性：

*{color: gray} //0,0,0,0
h1.title{color: purple;}

<h1 class="title">This is <em>purple</em></h1>

The em element inherits the purple font color as it is a descendant of h1. But remember, inherited values have no specificity. So even though our universal declaration has a specificity of 0,0,0,0, it will still overrule the inherited property. The result is the text inside of the em element is gray, and the rest of the text is purple.

em元素继承了紫色字体颜色，因为它是h1的后代。 但是请记住，继承的值没有特异性。 因此，即使我们的通用声明具有0,0,0,0的特定性，它仍然会否决继承的属性。 结果是em元素内的文本为灰色，其余文本为紫色。

Hopefully this introduction to specificity will help make your development process go smoother. It is not a new concept, or a terribly difficult one to learn, but understanding it can be very helpful.

希望本专一介绍有助于您的开发过程更加顺利。 这不是一个新概念，也不是一个很难学习的概念，但是理解它会很有帮助。

翻译自: https://timkadlec.com/2008/01/getting-specific-with-css/

css css2 css3