css3属性选择器_CSS3中的关系和属性选择器-CSDN博客

css3属性选择器

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3，第二版》一书。 副本在世界各地的商店中都有出售，您也可以在这里以电子书的形式购买。

CSS3选择器 (CSS3 Selectors)

Selectors are at the heart of CSS. Without selectors to target elements on the page, the only way to modify the CSS properties of an element would be to use the element’s style attribute and declare the styles inline, which is awkward and unmaintainable. So we use selectors. Originally, CSS allowed the matching of elements by type, class, and/or ID. This required adding class and ID attributes to our markup to create hooks and differentiates between elements of the same type. CSS2.1 added pseudo-elements, pseudo-classes, and combinators. With CSS3, we can target almost any element on the page with a wide range of selectors.

选择器是CSS的核心。如果没有选择器来定位页面上的元素，则修改元素CSS属性的唯一方法是使用元素的style属性并声明内联样式，这很尴尬且无法维护。因此，我们使用选择器。最初，CSS允许按类型，类和/或ID匹配元素。这需要在我们的标记中添加class和ID属性，以创建钩子并区分相同类型的元素。 CSS2.1添加了伪元素，伪类和组合器。使用CSS3，我们可以使用多种选择器将页面上的几乎所有元素作为目标。

In the descriptions that follow, we’ll be including the selectors provided to us in earlier versions of CSS. They are included because, while we can use CSS3 selectors, selectors that predate CSS3 are also part of the CSS Selectors Level 3 specification and are still supported, as CSS Selectors Level 3 expands on them. Even for those selectors that have been around for quite some time, it’s worth going over them here, as there are some hidden gems in the old spec that few developers know. Note that all modern browsers, including IE9 and above, support all CSS3 selectors.

在下面的描述中，我们将包括早期CSS版本中提供给我们的选择器。之所以包含它们，是因为尽管我们可以使用CSS3选择器，但早于CSS3的选择器也是CSS选择器3级规范的一部分，并且由于CSS选择器3级的扩展而仍受支持。即使对于已经存在了很长时间的选择器，也值得在这里进行研究，因为在旧规范中有一些隐藏的宝石，很少有开发人员知道。请注意，所有现代浏览器(包括IE9及更高版本)都支持所有CSS3选择器。

关系选择器 (Relational Selectors)

Relational selectors target elements based on their relationship to another element within the markup. All of these are supported since IE7+, and in all other major browsers:

关系选择器基于元素与标记中另一个元素的关系来定位元素。自IE7 +起，所有其他主要浏览器均支持所有这些功能：

后代组合器( `EF` ) (Descendant combinator (`E F`))

You should definitely be familiar with this one. The descendant selector targets any element F that is a descendant (child, grandchild, great grandchild, and so on) of an element E. For example, ol li targets li elements that are inside ordered lists. This would include li elements in a ul that’s nested in an ol, which might not be what you want.

您绝对应该熟悉这一点。后代选择器的目标是元素E的后代(子代，孙代，曾孙代等等)的任何元素F 例如， ol li定位在有序列表内的li元素。这将在嵌套在ol中的ul中包括li元素，这可能不是您想要的。

儿童组合器( `E > F` ) (Child combinator (`E > F`))

This selector matches any element F that is a direct child of element E—any further nested elements will be ignored. Continuing the example, ol > li would only target li elements directly inside theol, and would omit those nested inside aul.

该选择器匹配作为元素E的直接子元素的任何元素F任何其他嵌套元素都将被忽略。继续该示例， ol > li仅将直接位于ol内部的li元素作为目标，而忽略嵌套在ul那些元素。

相邻的subling或下一个同级选择器( `E + F` ) (Adjacent subling, or next sibling selector (`E + F`))

This will match any element F that shares the same parent as E, and comesdirectly after E in the markup. For example, li + li will target all li elements except the first li in a given container.

这将与与E共享相同父元素的任何元素F匹配，并且在标记中紧随E 之后。例如， li + li将针对给定容器中除第一个li外的所有li元素。

一般subling或以下的兄弟选择器( `E ~ F` ) (General subling, or following sibling selector (`E ~ F`))

This one’s a little trickier. It will match any element F that shares the same parent as any E and comes after it in the markup. So, h1 ~ h2 will match any h2 that follows an h1, as long as they both share the same direct parent—that is, as long as the h2 is not nested in any other element.

这有点棘手。它将匹配与任何E共享相同父元素并在标记之后的元素F 因此，只要h1都共享同一个直接父对象，即只要h2不嵌套在任何其他元素中，则它们将匹配h1 ~ h2任何h2 。

Let’s look at a quick example:

让我们看一个简单的例子：

<article>
  <header>
    <h1>Main title</h1>
    <h2>This subtitle is matched </h2>
  </header>
  <p> blah, blah, blah …</p>
  <h2>This is not matched by h1 ~ h2, but is by header ~ h2</h2>
  <p> blah, blah, blah …</p>
</article>

The selector string h1 ~ h2 will match the first h2, because both the h1 and h2 are children, or direct descendants, of the header. The next h2 you’ll see in the code snippet doesn’t match, since its parent is article, not header. It would, however, match header ~ h2. Similarly, h2 ~ p only matches the last paragraph, since the first paragraph precedes the h2 with which it shares the parent article.

选择器字符串h1 ~ h2将匹配第一个h2 ，因为h1和h2都是header子代或直接后代。您在代码段中看到的下一个h2不匹配，因为其父级是article ，而不是header。但是，它将匹配header ~ h2 。同样， h2 ~ p仅匹配最后一段，因为第一段在共享父项的h2之前。

注意：为什么没有“父”选择器？ (Note: Why is there no “parent” selector?)

You’ll notice that up to this point there has been no “parent” or “ancestor” selector, and there’s also no “preceding sibling” selector. The performance of the browser having to go backwards up the DOM tree, or recurse into sets of nested elements before deciding whether or not to apply a style, prevented the ability to have native “up the DOM tree” selectors.

您会注意到，到目前为止，还没有“父”或“祖先”选择器，也没有“之前的兄弟”选择器。浏览器的性能不得不倒退到DOM树上，或者在决定是否应用样式之前递归到嵌套元素的集合中，这阻止了具有本地“上DOM树”选择器的能力。

jQuery included :has() as an ancestral selector. This selector is being considered for CSS Selectors Level 4, but has yet to be implemented in any browser. If and when it is implemented, we will be able to use E:has(F) to find E that has F as a descendant, E:has(> F), to find E that has F as a direct child, E:has(+ F), to find E that directly precedes a sibling F, and similar.

jQuery包括:has()作为祖先选择器。 CSS选择器级别4已考虑使用此选择器，但尚未在任何浏览器中实现。如果当它的实现，我们就可以使用E:has(F)找到E有F作为后代， E:has(> F)找到E有F作为直接孩子， E:has(+ F) ，找到与同级F紧邻的E ，类似。

Looking through the stylesheet for The HTML5 Herald, you’ll see a number of places where we’ve used these selectors. For example, when determining the overall layout of the site, we want the three-column divs to be floated left. To avoid this style being applied to any other divs nested inside them, we use the child selector:

浏览HTML5 Herald的样式表，您会看到许多使用这些选择器的地方。例如，在确定站点的总体布局时，我们希望将三列div浮动到左侧。为了避免将此样式应用于嵌套在其中的任何其他div ，我们使用子选择器：

main > div {
  float: left;
  overflow: hidden;
}

As we add new styles to the site over the course of the next few chapters, you’ll be seeing a lot of these selector types.

在接下来的几章中，随着我们向网站添加新样式，您将看到很多这些选择器类型。

属性选择器 (Attribute Selector)

CSS2 introduced several attribute selectors. These allow for matching elements based on their attributes. CSS3 expands upon those attribute selectors, allowing for some targeting based on pattern matching. CSS Selectors Level 4 adds a few more:

CSS2引入了几个属性选择器。这些允许根据元素的属性进行匹配。 CSS3扩展了这些属性选择器，允许基于模式匹配进行某些定位。 CSS选择器第4级添加了更多内容：

E[attr]

Matches any element E that has the attribute attr regardless of the attribute’s value. We made use of this back in Chapter 4 to style required inputs; input:required works in the latest browsers, but input[required] has the same effect and works in IE7 and IE8 as well.

与具有属性attr任何元素E匹配，而与属性的值无关。我们在第4章中使用了此样式来设置所需输入的样式。 input:required在最新的浏览器中有效，但是input[required]具有相同的效果，并且也适用于IE7和IE8。

E[attr=val]

Matches any element E that has the attribute attr with the exact value val. While not new, it’s helpful in targeting form input types; for instance, targeting checkboxes with input[type=checkbox].

将具有属性attr任何元素E与精确值val匹配。尽管不是新功能，但对于定位表单输入类型很有帮助；例如，使用input[type=checkbox]定位复选框。

E[attr|=val]

Matches any element E whose attribute attr either has the value val or begins with val-. This is most commonly used for the lang attribute. For example, p[lang|="en"] would match any paragraph that has been defined as being in English whether it be UK or US English with <p lang="en-uk"> or <p lang="en-us">.

匹配任何元素E其属性attr要么具有值val或开头val- 。这最常用于lang属性。例如， p[lang|="en"]将匹配任何定义为英语的段落，无论是英国英语还是美式英语，并带有<p lang="en-uk">或<p lang="en-us"> 。

E[attr~=val]

E [attr == val]

Matches any element E whose attribute attr has within its value the full word val, surrounded by whitespace. For example, .info[title~=more] would match any element with the class info that had a title attribute containing the word “more,” such as “Click here for more information.”

匹配其属性attr的值内具有完整单词val由空格包围的任何元素E 例如， .info[title~=more]将匹配具有title属性包含单词“ more”的类信息的任何元素，例如“单击此处以获取更多信息”。

E[attr^=val]

Matches any element E whose attribute attr starts with the value val. In other words, the val matches the beginning of the attribute value.

匹配任何属性attr以值val开头的元素E 换句话说， val与属性值的开头匹配。

E[attr$=val]

Matches any element E whose attribute attr ends in val. In other words, the val matches the end of the attribute value.

匹配任何属性attr以val 结尾的元素E 换句话说， val与属性值的末尾匹配。

E[attr*=val]

Matches any element E whose attribute attr matches val anywhere within the attribute. It is similar to E[attr~=val], except the val can be part of a word. Using the same example as before, .fakelink[title*=info] {} would match any element with the class fakelink that has a title attribute containing the string info, such as “Click here for more information.”

与属性attr匹配val任何元素E在属性内的任何地方匹配。它与E[attr~=val] ，除了val可以是单词的一部分。使用与之前相同的示例， .fakelink[title*=info] {}将匹配任何具有title属性包含字符串info (例如，单击此处以获取更多信息)的fakelink类的元素。

In these attribute selectors, the value of val is case-sensitive for values that are case sensitive in HTML. For example, input[class^="btn"] is case sensitive as class names are case sensitive, but input[type="checkbox"] is not case sensitive, as the type value is case-insensitive in HTML.

在这些属性选择器中，对于HTML中区分大小写的值， val的值区分大小写。例如， input[class^="btn"]区分大小写，因为类名区分大小写，但是input[type="checkbox"]不区分大小写，因为type值在HTML中不区分大小写。

The value does not have to be quoted if the value is alphanumeric, with some exceptions. Empty strings, strings that begin with a number, two hyphens, and other quirks need to be quoted. Because of the exceptions, it’s a good idea to make a habit of always including quotes for those times when you do need them.

如果值是字母数字，则不必用引号引起来，但有一些例外。空字符串，以数字开头的字符串，两个连字符和其他古怪之处必须加引号。因为有例外，所以最好养成在需要时总是包含引号的习惯。

In CSS Selectors Level 4, we can have case insensitivity by including an i before the closing bracket, E[attr*=val i].

在CSS选择器第4级中，我们可以通过在右括号E[attr*=val i]之前加入i区分大小写。