css :not_用：not否定CSS规则

css :not

Traditional web design has been about crafting a series of explicit declarations with inline, embedded and linked styles. Weaving through the different layers of stylesheets, these CSS rules come together to form a final presentational ruleset. Undoing those rules or forming exceptions to them has been a difficult task, often relegated to “napalm the forest” CSS resets or the tedious reversal of property values. Until very recently, it’s been impossible to easily create a rule that says, “apply these values to everything but this element.”

传统的Web设计一直在设计一系列具有内联，嵌入式和链接样式的显式声明。 这些CSS规则遍历样式表的不同层，一起形成最终的呈现规则集。 撤消这些规则或为它们形成例外是一项艰巨的任务，通常会降级为“重击森林” CSS重置或繁琐的属性值反转。 直到最近，它已经不可能很容易地创建一个规则说，“这些数值适用于一切，但这个元素。”

否的力量 (The Power of No)

CSS3 introduces the :not selector, which does exactly that. It’s such a reversal of normal web development practices that it can take a little getting used to.

CSS3引入了:not选择器，它可以做到这一点。 这是对常规Web开发实践的逆转，可能需要一点时间来习惯。

A simple, if not terribly practical, example: let’s say that we wanted to italicize every paragraph on a page except content that was marked up with a class of .special. The traditional CSS approach would require two separate declarations: one setting up the general rule for italicizing every paragraph, and the other creating an exception to that rule:

一个简单的，即使不是非常实际的示例：假设我们要斜体显示页面上除标有.special class的内容之外的每个段落。 传统CSS方法需要两个单独的声明：一个设置斜体每个段落的通用规则，另一个创建该规则的例外：

p {
	font-style: italic;
	}
.special {
	font-style: normal;
	}

We could reduce this to a single rule by the use of the :not selector:

我们可以通过使用:not选择器将其简化为一条规则：

p:not(.special) {
	font-style: italic;
}

This would italicize every paragraph except those that had a class of .special.

这将使除具有.special类的段落外的所有段落都变为斜体。

You have to be careful in choosing what goes before the colon in the selector, as a poor choice can overwrite the rule and nullify any exceptions. For example, although you’ll find variations of this on many “tutorial sites” online, the following will not work:

您必须谨慎选择选择器中冒号之前的内容，因为选择不当可能会覆盖规则并使所有异常无效。 例如，尽管您可以在线上许多“教程站点”上找到此版本的变体， 但以下操作无效 ：

:not(.special) {
	font-style: italic;
}

In that case, what’s presumed to be before the colon is a wildcard selector, which overwhelms the :not rule. That rule is equivalent to the following, which will also not work:

在这种情况下，假定冒号之前是通配符选择器，它使:not规则不堪重负。 该规则等效于以下规则，该规则也不起作用 ：

body:not(.special) {
	font-style: italic;
}

It’s too broad a rule: the body part of the selector will make everything italic, ignoring the portion of the rule that follows it.

规则太宽泛：选择器的body部分会使所有内容变为斜体，而忽略规则后面的部分。

The key, therefore, is being specific enough at the start so as not to overwhelm any :not rule that you make.

因此，密钥在开始时就足够具体，以免使您制定的任何:not规则不知所措。

实际示例：不 (Practical Examples Of :not)

Let’s say you wanted to make every internal, local link on your website have a different appearance to absolute, external links. For example, in the following code:

假设您要使网站上的每个内部本地链接的外观都不同于绝对外部链接 。 例如，在以下代码中：

The 
Treaty of Westphalia created a new system of political order in central 
Europe that was based upon the concept of a sovereign state, and established an 
international protocol forbidding interference in another nation's domestic affairs. 
The treaty signalled the end of the destructive wars that had ravaged Europe in the 
centuries before, and represented the triumph of national rule over the personal 
writ of the Habsburg Emperors. The treaty’s 
regulations became integral to the constitutional law of the 
Holy Roman Empire, and were the 
genesis of the modern nation-state concept.

…we want to have the first, external link to have a different appearance from local links at the end of the paragraph.

…我们希望第一个外部链接的外观与本段末尾的本地链接有所不同。

While we can’t know anything about the internal links in advance, we can say that any external links will begin with http. To that end, we can create a general, default rule for links, then follow it with another rule for links that do not begin with http using a combination of :not and an attribute selector:

尽管我们事先对内部链接一无所知，但可以说任何外部链接都将以http开头。 为此，我们可以创建一个链接一般情况下，默认的规则，那么另一个规则的链接不首先遵循它http使用的组合:not和属性选择 ：

a {
	text-decoration: none;
	border-bottom: 1px dashed #333;
	color: #333;
}
a:not([href^="http"]) { 
	border-bottom: 2px solid #000;
}

Applying those rules will create the following result:

应用这些规则将产生以下结果：

The Treaty of Westphalia created a new system of political order in central Europe that was based upon the concept of a sovereign state, and established an international protocol forbidding interference in another nation's domestic affairs. The treaty signaled the end of the destructive wars that had ravaged Europe in the centuries before, and represented the triumph of national rule over the personal writ of the Habsburg Emperors. The treaty’s regulations became integral to the constitutional law of the Holy Roman Empire, and were the genesis of the modern nation-state concept.

《威斯特伐利亚条约》在中欧建立了以主权国家概念为基础的新政治秩序体系，并建立了禁止干涉另一个国家内政的国际协议。 该条约标志着几百年前席卷欧洲的破坏性战争的结束，并标志着国家统治战胜了哈布斯堡王朝的个人旨意 。 该条约的规定成为神圣罗马帝国宪法的组成部分，并且是现代民族国家概念的起源。

Note that the attribute selector still requires hard braces around it. Also note that the local links will still inherit presentational rules from first declaration that are not directly contradicted in the second.

请注意，属性选择器仍然需要用大括号括起来。 还要注意，本地链接仍将继承第一个声明中与第二个声明没有直接矛盾的表示规则。

支持：不 (Support For :not)

There are many instances where :not is the most efficient method of dealing with exceptions to CSS rules, but it will sometimes require a lateral, even counter-intuitive, approach.

在许多情况下， :not是处理CSS规则异常的最有效方法，但是有时它需要横向的，甚至违反直觉的方法。

This shift in mental models is made slightly more difficult by the issue of browser support: while :not has been a feature of all modern browsers for a long time (Firefox 3.5+, Safari 3.2+, and Chrome since its inception) Internet Explorer has only supported it since version 9.  Gaining support for older versions of IE would typically mean adding a JavaScript polyfill such as selectivizr or IE9.js

由于浏览器支持的问题，这种思维模式的转变变得更加困难：尽管:not长期以来:not所有现代浏览器的功能(Firefox 3.5 +，Safari 3.2+和Chrome自问世以来)，Internet Explorer仅从版本9开始才支持它。获得对IE较早版本的支持通常意味着添加JavaScript polyfill，例如selectivizr或IE9.js。

翻译自: https://thenewcode.com/589/Negating-CSS-Rules-With-not

css :not