css规则

New web developers are often confused about where to place the rules for their CSS, especially if those rules contradict others in a stylesheet. Curiously, my students seem to have no problem remembering which card beats what in a game of Magic: The Gathering, or which level of Pikachu would do best against a Vulpix in a game of Pokémon… so perhaps it is best to characterize the conflict of CSS rules as a battle for control of your page content.

新的Web开发人员通常对于将CSS规则放在何处感到困惑，特别是如果这些规则与样式表中的其他规则矛盾的话。 奇怪的是，我的学生似乎没有什么问题可以记住，在魔术游戏：聚会中，哪张牌胜过什么；在神奇宝贝的游戏中，哪一级的皮卡丘在对抗Vulpix方面最胜一筹……所以也许最好是刻画CSS作为控制页面内容的斗争。

As a simple example, let’s say we set up the following opposing CSS rules and apply them to HTML code. We’ll start with a linked style sheet:

举一个简单的例子，假设我们设置了以下相反CSS规则，并将它们应用于HTML代码。 我们将从链接的样式表开始：

h1 {color: red;
}

Applied to a page with this markup and inline style:

应用于具有此标记和内联样式的页面：

<h1 style="color: green;">Heading Text</h1>

The browser must determine the winner to produce the final appearance of the <h1> text. The rules of this battle are not always obvious, especially since there are several “levels” of stylesheet:

浏览器必须确定获胜者才能产生<h1>文本的最终外观。 这场斗争的规则并不总是很明显，尤其是因为样式表有多个“层次”：

1. The UA stylesheet: the CSS rules that are built into the browser. The UA stylesheet has absolute priority for the appearance of elements unless its rules are directly contradicted by declarations in the user or author stylesheets below. The rules in the UA stylesheet determine how the browser presents every website by default; subtle differences in the UA stylesheets of different vendors is the reason many web developers prefer to start the CSS for their sites with reset or normalize declarations.

   UA样式表 ：浏览器内置CSS规则。 UA样式表对于元素的外观具有绝对优先级，除非其规则与下面的用户或作者样式表中的声明直接矛盾。 UA样式表中的规则决定了浏览器默认情况下如何显示每个网站。 不同供应商的UA样式表之间的细微差异是许多Web开发人员倾向于使用重置或规范化声明启动其站点CSS的原因。

2. The user stylesheet: the user may set their own rules for how they wish to see HTML content. This may include setting the zoom level on pages, increasing the font size, or using high-contrast colors.

   用户样式表 ：用户可以为希望查看HTML内容的方式设置自己的规则。 这可能包括在页面上设置缩放级别，增加字体大小或使用高对比度的颜色。

3. 1. Inline styles for individual elements, which take precedence over…
      单个元素的内联样式优先于…
   2. Scoped styles (new in HTML5, and the subject of another blog article)
      范围样式(HTML5中的新增功能，以及另一篇博客文章的主题)
   3. Embedded styles for a page
      页面的嵌入式样式
   4. Linked CSS rules from an external stylesheet.
      来自外部样式表的链接CSS规则。

   The author styles, which are divided into four sub-levels:

   作者样式 ，分为四个子级别：

Most of the effort of front-end developers and designers is concentrated on author styles, so that is the battle we’ll focus our attention on: there’s nothing you can do about UA or user stylesheets anyway, short of the aforementioned resets and the !important property (again, discussed later).

前端开发人员和设计师的大部分工作都集中在作者样式上，因此我们将集中精力进行这场战斗：UA或用户样式表仍然无能为力，只有上述的重置和!important属性(再次讨论)。

带距离CSS规则优先级 (CSS Rule Prioritization With Distance)

The basic rule you need to keep in mind to determine CSS precedence is this: all other things being equal, rules for appearance become more “powerful” the closer they get to the element they affect. In the case of a conflict, an inline style will beat an embedded style, which in turn has more power than a linked style over the affected element.

确定CSS优先级时需要牢记的基本规则是：在所有其他条件相同的情况下，外观规则越接近影响的元素，其功能就越“强大”。 在发生冲突的情况下，内联样式将胜过嵌入式样式，嵌入式样式在受影响的元素上比链接样式具有更多的功能。

Of course, inline styles are also the most time-consuming to write and manage, which leads to an important point:

当然，内联样式也是最耗时的编写和管理，这引出了重要的一点：

带顺序CSS规则优先级 (CSS Rule Prioritization With Order)

As a general rule, you can think of CSS as being read from left to right, and top to bottom. CSS rules in an inline, embedded or linked style take precedence over conflicting rules earlier in that same location. That is, in the case of a conflict, the last rule takes priority. If we have a stylesheet with two conflicting rules:

通常，您可以认为CSS是从左到右，从上到下读取的。 在CSS规则内联，嵌入或链接的样式比在同一位置更早冲突的规则占先。 也就是说，在发生冲突的情况下， 最后一条规则优先。 如果我们有一个带有两个冲突规则的样式表：

h1 { color: black; }
h1 { color: red; }

The last rule will be followed; h1 elements will be red, assuming there are no other conflicting rules. This is also the reason we list W3C standard CSS3 properties last in a declaration, with vendor-prefixed versions first.

遵循最后一条规则； 假设没有其他冲突规则，则h1元素将为红色。 这也是我们在声明中最后列出W3C标准CSS3属性，首先列出供应商前缀版本的原因。

特异性 (Specificity)

The more specific a rule is, the higher its priority. Again, in a theoretical stylesheet:

规则越具体 ，其优先级越高。 同样，在理论样式表中：

p { margin: 2em; }
aside p { margin: 3em; }

In this example paragraphs that are within an <aside> element will have a margin of 3em, whatever the order of the two declarations may be in the stylesheet. (As a best practice, create general rules first, exceptions later in your stylesheet: it makes it much easier to understand your CSS).

在此示例中， <aside>元素内的段落的边距为3em ，无论样式表中两个声明的顺序如何。 (最佳做法是， 先创建一般规则，异常后在样式表：它使得它更容易理解你CSS)。

Specificity also counters inheritance:

特异性还可以抵抗继承：

article {line-height: 200%;
}
article p {line-height: 120%;
}

In this case, paragraphs in articles will have a line-height (leading) of 120%

在这种情况下，文章中的段落的行高(前导)为120%

id的王牌类，后者反过来击败了简单的元素选择器 (id’s trump classes, which in turn beat simple element selectors)

Style conflicts between an id and a class are settled in favor of the id. For example these styles:

一个id和一个class之间的样式冲突得到解决，而使用id 。 例如这些样式：

p#special {font-size: 2rem;
}
p.specialness {font-size: 1rem;
}

Applied to this markup:

应用于此标记：

<p id="special" class="specialness">This is a very special paragraph…

The font-size of the paragraph will be 2rem. In a similar sense, the class for an element will beat any contradictory rules applied using a simple element selector.

该段落的font-size将为2rem 。 类似地，元素的class将击败使用简单元素选择器应用的所有矛盾规则。

The rather strange exception to this rule are classes with the specific name c000 to c255, which will beat a contradictory id declaration, as Chris Coyier demonstrates in this example.

该规则的一个非常奇怪的例外是名称为c000到c255 ， 它将击败矛盾的id声明，如Chris Coyier在此示例中所展示的 。

记住CSS是通过继承协调的 (Remember That CSS Is Reconciled Via Inheritance)

Many new web developers are convinced that they must re-state all the rules they wish to use in a CSS declaration. This isn’t the case: you only have to state the rules that are different.

许多新的Web开发人员相信，他们必须重新声明希望在CSS声明中使用的所有规则。 事实并非如此：您只需要声明不同的规则。

For example, in the following:

例如，在以下内容中：

body {color: #333;font-size: 62.5%;font-family: Avenir, Arial, sans-serif;
}
h1 {color: #c00;font-size: 2rem;
}
p {font-size: 1rem;
}

We only need to specify the size of the paragraphs; everything else is inherited from the <body> selector.

我们只需要指定段落的大小即可； 其他所有内容都从<body>选择器继承。

结论 (Conclusion)

Understanding the rank, structure and resolution of CSS declarations that you order about on your site is one of the core skills of a generalist front-end web developer; having these rules at hand will help you write crisp, clean and ordered CSS code.

了解您在网站上订购CSS声明的等级，结构和分辨率是通才的前端Web开发人员的核心技能之一； 掌握这些规则将有助于您编写清晰，整洁且有序CSS代码。

翻译自: https://thenewcode.com/570/Controlling-The-Battle-of-CSS-Rules

css规则