结构伪类_结构化伪类

最新推荐文章于 2024-04-25 20:37:26 发布

culi3118

最新推荐文章于 2024-04-25 20:37:26 发布

阅读量850

点赞数 1

文章标签：定位 java python javascript linux ViewUI

原文链接：https://www.sitepoint.com/structural-pseudo-classes/

版权

结构伪类

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，第二版》一书。 副本在世界各地的商店中都有出售，您也可以在这里以电子书的形式购买。

So far, we’ve seen how we can target elements based on their attributes and states. CSS3 also enables us to target elements based simply on their location in the markup. These selectors are grouped under the heading structural pseudo-classes.

到目前为止，我们已经了解了如何基于元素的属性和状态来定位元素。 CSS3还使我们能够仅基于元素在标记中的位置来定位元素。这些选择器分组在结构伪类的标题下。

These might seem complicated right now, but they’ll make more sense as we look at ways to apply them later on. These selectors are supported in IE9 and newer, as well as current and older versions of all the other browsers but not in IE8 and below:

这些现在可能看起来很复杂，但是随着我们日后寻找应用它们的方法，它们将变得更加有意义。 IE9和更高版本以及所有其他浏览器的当前版本和较旧版本均支持这些选择器，但IE8及以下版本不支持这些选择器：

:root

The root element, which is the html element in our HTML files.

根元素，即我们HTML文件中的html元素。

E:nth-child(n)

The element E that is the nth child of its parent. The n parameter is explained in the note below.

元素E是其父元素的第n个子元素。 n参数在以下注释中说明。

E:nth-last-child(n)

The element F that is the nth child of its parent E, counting backwards from the last one. li:nth-last-child(1) would match the last item in any listthis is the same as li:last-child (see the note below).

元素F是其父E第n个子元素，从最后一个开始倒数。 li:nth-last-child(1)将匹配任何列表中的最后一项，这与li:last-child (请参见下面的注释)。

E:nth-of-type(n)

The element that is the nth element of its type in a given parent element.The difference between :nth-child and :nth-of-type is explained in the note below.

在给定的父元素中是其类型的第n个元素的元素。 :nth-child和:nth-of-type之间的区别在下面的注释中进行了解释。

E:nth-last-of-type(n)

Like nth-of-type(n), except counting backwards from the last element in a parent.

像nth-of-type(n) ，除了从父级的最后一个元素开始倒数。

注意：结构选择器的参数 (Note: Parameters of Structural Selectors)

There are four pseudo-classes that take the equation an+b as a parameter in parentheses, or the keywords odd and even. The structural pseudo-classes include :nth-child(an + b), :nth-last-child(an + b), :nth-of-type(an + b), and :nth-last-of-type(an + b). In the equation an+b, a is the multiplier as an integer, b is the offset as an integer, and n is always the variable n.

有四个伪类将括号中的等式an+b作为参数，或将关键字odd和even作为参数。结构化伪类包括:nth-child(an + b) :nth-last-child(an + b) :nth-of-type(an + b)和:nth-last-of-type(an + b) 。在等式an+b ， a是作为整数的乘数， b是作为整数的偏移，并且n始终是变量n 。

In the simplest case, you can pass an integer. For example, E:nth-of-type(3) will target the third E element child of a single parent element. You can pass one of the two keywords odd or even, targeting every other element. You can also, more powerfully, pass a number expression such as E:nth-of-type(3n+1). 3n means every third element, defining the frequency, and +1 is the offset. The default offset is zero, so where :nth-of-type(3n) would match the 3rd, 6th, and 9th elements in a series, :nth-of-type(3n+1 would match the 1st, 4th, 7th, and so on.

在最简单的情况下，您可以传递整数。例如， E:nth-of-type(3)将定位到单个父元素的第三个E元素子元素。您可以传递其他所有关键字作为目标的odd或even两个关键字之一。您也可以更强大地传递数字表达式，例如E:nth-of-type(3n+1) 。 3n表示每三个元素定义一次频率，而+1是偏移量。默认偏移量为零，因此:nth-of-type(3n)将匹配系列中的第3、6和9个元素， :nth-of-type(3n+1将匹配第1、4、7th，等等。

Negative offsets are also allowed. CSS is based on linguistic languages, not programming languages, so the count starts at 1 not 0. There can be no space between the multiplier a and the variable n, and the offset must come last.

也允许负偏移量。 CSS基于语言而不是编程语言，因此计数从1而不是0开始。乘法器a和变量n之间不能有空格，并且偏移量必须排在最后。

With these numeric pseudo-classes, you can pinpoint which elements you want to target without adding classes to the markup. The most common example is a table where every other row is a slightly darker color to make it easier to read. We used to have to add odd or even classes to every tr to accomplish this. Now, we can simply declare tr:nth-of-type(odd) to target every odd line without touching the markup. You can even take it a step further with three-colored striped tables: target tr:nth-of-type(3n), tr:nth-of-type(3n+1), and tr:nth-of-type(3n+2) and apply a different color to each.

使用这些数字伪类，您可以精确定位要定位的元素，而无需在标记中添加类。最常见的示例是表格，其中每隔一行的颜色略深一些，以便于阅读。我们曾经不得不向每个tr添加奇数或偶数类来完成此操作。现在，我们只需声明tr:nth-of-type(odd)即可定位每条奇数行，而无需触碰标记。您甚至可以进一步使用三色条纹表：目标tr:nth-of-type(3n) ， tr:nth-of-type(3n+1)和tr:nth-of-type(3n+2)然后为每种颜色应用不同的颜色。

E:first-child

The element E if E is the first child of its parent. This is the same as E:nth-child(1).

如果E是其父级的第一个孩子，则元素E 这与E:nth-child(1) 。

E:last-child

The element E if E is the last child of its parent, same as E:nth-last-child(1).

如果E是其父元素的最后一个子元素，则元素E与E:nth-last-child(1) 。

:first-of-type

The same as :nth-of-type(1).

与:nth-of-type(1) 。

E:last-of-type

The same as :nth-last-of-type(1).

与:nth-last-of-type(1) 。

E:only-child

Element E if E is the only child of its parent.

如果E是其父项的唯一子项，则元素E

E:only-of-type

Element E if E is the only element of type E that is a direct child of its parent element.

元E如果E是类型的唯一元素E这是它的父元素的直接子。

注意：孩子与类型 (Note: Child versus Type)

In employing the structural selectors of nth-of-type and nth-child, its important to understand what child and type mean in this case. Child looks at all the child elements that match the count and check if the precursor is a match. Type looks at all the elements that match the precursor first, then matches based on the count.

在使用nth-of-type和nth-child的结构选择器时，了解哪个孩子很重要？和类型？在这种情况下是卑鄙的。儿童？？查看与计数匹配的所有子元素，并检查前体是否匹配。类型？？首先查看所有与前体匹配的元素，然后根据计数进行匹配。

In the case of p:nth-child(3n), the browser looks at every third child of a parent. If that child is a p, there is a match; if not, no match. In the case of p:nth-of-type(3n), the browser looks at all the p children of the parent, and matches every third p.

对于p:nth-child(3n) ，浏览器将查看父级的每三个子级。如果那个孩子是p ，那么有一个匹配项。如果没有，则不匹配。在p:nth-of-type(3n) ，浏览器查看父对象的所有p个子对象，并与每三个p匹配。

Structural pseudo-classes are based on the parent, and restart counting for each new parent. They only look at elements that are the direct children of the parent. Text nodes are not part of the equation.

结构化伪类基于父级，并为每个新父级重新开始计数。他们只看作为父级直接子级的元素。文本节点不是等式的一部分。

E:empty

An element that has no children; this includes text nodes, so hello and   will not be matched by p:empty, but  and  will be. This selector also matches empty or void elements, such as   and <input&gt . In CSS Selectors Level 4, well get p:blank that will match  .

没有子元素的元素；这包括文本节点，因此hello和 不会与p:empty匹配，但是和将会。此选择器还匹配空元素或空元素，例如 和<input&gt 。在CSS选择器第4级中，将获得与 .匹配的p:blank  .

E:lang(en)

An element in the language denoted by the two-letter abbreviation, such as en. Unlike E:[lang|=en], where the lang attribute must be present as an attribute of element E, E:lang(en) will match E if the language was declared on the element itself or any ancestor.

用两个字母缩写表示的语言中的元素，例如en 。与E:[lang|=en] ，在lang属性必须作为元素E的属性存在的情况下，如果在元素本身或任何祖先上声明了语言，则E:lang(en)将与E匹配。

E:not(exception)

This is a particularly useful one: it will select elements that dont match the selector in the parentheses.

这是一个特别有用的功能：它将选择与括号中的选择器不匹配的元素。

Selectors with the :not pseudo-class match everything to the left of the colon, and then exclude from that matched group the elements that also match whats to the right of the colon. The left-hand side matching goes first. For example, p:not(.copyright) will match all the paragraphs in a document first, and then exclude all the paragraphs from the set that also have the class of copyright. You can string several :not pseudo-classes together. input:not([type=checkbox]):not([type=radio]) will match all input elements on a page except those that are of type checkbox or radio.

具有:not伪类的选择器将所有内容匹配到冒号左侧，然后从该匹配组中排除也匹配冒号右侧内容的元素。左侧匹配优先。例如， p:not(.copyright)将首先匹配文档中的所有段落，然后从集合中排除也具有copyright类的所有段落。您可以将多个:not伪类连接在一起。 input:not([type=checkbox]):not([type=radio])将匹配页面上的所有input元素，但类型为checkbox或radio除外。