幻影pin_幻影CSS

幻影pin

At the heart of CSS, of course, are its selectors. They are after all what allow us to apply styles to a given element in our (X)HTML. Sometimes though, there is a desire to apply a style based on an elements state. That is where pseudo-classes come into play. You’ve probably all used them at some point…but there may be more there than you realize. Their value makes it worth taking a closer look.

当然，CSS的核心是选择器。 毕竟，它们是使我们能够将样式应用于(X)HTML中给定元素的方式。 但是，有时希望基于元素状态应用样式。 这就是伪类的作用。 您可能在某个时候都使用过它们……但是那里可能比您意识到的更多。 它们的价值值得一看。

静态伪类 (Static Pseudo-Classes)

Pseudo-classes allow us to apply an invisible, or “phantom”, class to an element in order to style it. For example, let’s look at the element most often styled using pseudo-classes: the anchor tag (). Some anchor tags point to locations a user has already viewed, and some point to locations the user has not yet visited. Looking at the document structure, we can’t tell this. No matter if the link is viewed or not, it looks the same in (X)HTML. However, behind the scenes, a “phantom” class is applied to the link to differentiate between the two. We can access this “phantom” class with pseudo-class selectors, like :link and :visited. (Pseudo-classes are always prefixed by a colon.)

伪类使我们可以对元素应用不可见或“幻像”类，以为其设置样式。 例如，让我们看一下最常使用伪类设置样式的元素：锚标记()。 一些定位标记指向用户已经查看过的位置，而某些指向用户尚未访问过的位置。 从文档结构来看，我们无法分辨这一点。 无论是否查看该链接，它在(X)HTML中的外观都相同。 但是，在幕后，将“幻像”类应用于链接以区分两者。 我们可以使用伪类选择器(例如：link和：visited)访问该“幻像”类。 (伪类始终以冒号作为前缀。)

The :link pseudo-class selector refers to any anchor tag that is a link…that is any anchor tag that has a href attribute. The :visited pseudo-class selector does exactly what it sounds like…it refers to any link that has been visited. Using these pseudo-classes allows us to apply different effects to links on the page according to the visited state.

：link伪类选择器指的是链接的任何锚标记…即具有href属性的任何锚标记。 ：visited伪类选择器确实可以听起来像……它是指已访问的任何链接。 使用这些伪类使我们可以根据访问状态将不同的效果应用于页面上的链接。

`

`

1. a {color:blue;}

   {color：blue;}

2. a:link {color: red;}

   a：link {颜色：红色；}

3. a:visited {color: orange;}

   a：访问过的{颜色：橙色；}

` The above styles for example, will make any anchor tag that does not have a href attribute to be colored blue (line 1). Any link that has a href attribute, but has not been visited will be red (line 2). Finally, if a link is visited (line 3), then it is an orange color.

`例如，以上样式将使没有href属性的所有锚标签都变为蓝色(第1行)。 具有href属性但未被访问的任何链接将为红色(第2行)。 最后，如果访问了链接(第3行)，则该链接为橙色。

Another static pseudo-class is :first-child (The :first-child pseudo-class is not supported by IE6). The :first-child selector is used to select elements that are first children of other elements. This can be easily misunderstood. A lot of times, people will try to use it to select the first-child of an element. For example:

另一个静态伪类是：first-child(IE6不支持：first-child伪类)。 ：first-child选择器用于选择作为其他元素的第一个子元素的元素。 这很容易被误解。 很多时候，人们会尝试使用它来选择元素的第一个孩子。 例如：

`

`

2. Here is some text

   这是一些文字

Say we want to apply a style to the paragraph element. It is not uncommon to see people try to do this using the following style: `

Say we want to apply a style to the paragraph element. It is not uncommon to see people try to do this using the following style: Say we want to apply a style to the paragraph element. It is not uncommon to see people try to do this using the following style:

`

`

• div:first-child {font-weight: bold;}
  div：first-child {font-weight：bold;}

However, this is not how the pseudo-class works. If we think back to the concept of pseudo-classes essentially being "phantom" classes, then what we just did was apply a phantom class to the div like so: `

However, this is not how the pseudo-class works. If we think back to the concept of pseudo-classes essentially being "phantom" classes, then what we just did was apply a phantom class to the div like so: However, this is not how the pseudo-class works. If we think back to the concept of pseudo-classes essentially being "phantom" classes, then what we just did was apply a phantom class to the div like so:

`

`

2. Here is some text

   这是一些文字

Obviously that is not what we want. The :first-child selector doesn't grab the first child of an element; it just grabs any of the specified element that is a first-child. The correct way to style that would be with the following line: `

Obviously that is not what we want. The :first-child selector doesn't grab the first child of an element; it just grabs any of the specified element that is a first-child. The correct way to style that would be with the following line: Obviously that is not what we want. The :first-child selector doesn't grab the first child of an element; it just grabs any of the specified element that is a first-child. The correct way to style that would be with the following line:

`

`

• p:first-child {font-weight: bold;}
  p：第一胎{font-weight：bold;}

That's probably as clear as mud, so it may help to take another look at the "phantom" class: `

That's probably as clear as mud, so it may help to take another look at the "phantom" class:

`

`

Here is some text

这是一些文字

`

`

注意你说的话 (Watch Your Language)

Corny headings aside, we can select elements based on the language using the :lang( ) pseudo-class. For example, we can italicize anything in French using the following style:

除了Corny标题外，我们可以使用：lang()伪类根据语言选择元素。 例如，我们可以使用以下样式来斜体显示法语中的任何内容：

`

`

• *:lang(fr) {font-style: italic;}
  *：lang(fr){font-style：斜体;}

` Where does the language get defined? According to the CSS 2.1 specification, the language can be defined in one of many ways:

`语言在哪里定义？ 根据CSS 2.1规范，可以通过多种方式之一定义语言：

In HTML, the language is determined by a combination of the lang attribute, the META element, and possibly by information from the protocol (such as HTTP headers). XML uses an attribute called xml:lang, and there may be other document language-specific methods for determining the language.

在HTML中，语言是由lang属性，META元素以及可能来自协议的信息(例如HTTP标头)的组合确定的。 XML使用称为xml：lang的属性，并且可能还有其他特定于文档语言的方法来确定语言。

动态伪类 (Dynamic Pseudo-Classes)

So far, what we have discussed are static pseudo-classes. That is, once the document is loaded, these pseudo-classes don’t change until the page is reloaded. The CSS 2.1 specification also defines three dynamic pseudo-classes. These pseudo-classes can change a document’s appearance based on user behavior. They are:

到目前为止，我们讨论的是静态伪类。 也就是说，一旦文档被加载，这些伪类在重新加载页面之前不会改变。 CSS 2.1规范还定义了三个动态伪类。 这些伪类可以根据用户行为来更改文档的外观。 他们是：

• :focus - any element that has input focus

  :focus任何具有输入焦点的元素

• :hover - any element that the mouse pointer is placed over

  :hover鼠标指针放在其上的任何元素

• :active - any element that is activated by user input (ex: a link while being clicked)

  :active用户输入激活的任何元素(例如：单击时的链接)

Usually, these pseudo-classes are applied only to links. However, they can be used on other elements as well. For example, you could use the following style to apply a yellow background to any input field in a form when it has the focus.

通常，这些伪类仅应用于链接。 但是，它们也可以用于其他元素。 例如，您可以使用以下样式将黄色背景应用于具有焦点的表单中的任何输入字段。

`

`

• input:focus {background: yellow;}
  输入：焦点{背景：黄色；}

` The main reason this is not done a lot is because of a lack of support. IE6 does not allow any dynamic pseudo-classes to be applied to anything besides links. IE7 allows the :hover pseudo-class to be applied to all elements, but doesn’t let the :focus pseudo-class be applied to form elements.

`这样做没有做的主要原因是缺乏支持。 IE6不允许将任何动态伪类应用于链接以外的任何内容。 IE7允许：hover伪类应用于所有元素，但不允许：focus伪类应用于表单元素。

复杂伪类 (Complex Pseudo-Classes)

CSS offers us the ability to apply multiple pseudo-classes so long as they aren’t mutually exclusive. For example, we can chain a :first-child and :hover pseudo-class, but not a :link and :visited.

CSS使我们能够应用多个伪类，只要它们不是互斥的即可。 例如，我们可以链接：first-child和：hover伪类，但不能链接：link和：visited。

`

`

1. p:first-child:hover {font-weight: bold;} //works

   p：first-child：hover {font-weight：bold;} //有效

2. a:link:visited {font-weight: bold;} //link and visited are mutually exclusive

   a：link：visited {font-weight：bold;} //链接和访问是互斥的

` Again, there is a compliance issue here with IE6. The IE6 browser will only recognize the final pseudo-class mentioned. So in the case of our first style above, IE6 will ignore the :first-child pseudo-class selector and just apply the style to the :hover pseudo-class.

再次，IE6存在合规性问题。 IE6浏览器将仅识别最终提到的伪类。 因此，在上述第一种样式的情况下，IE6将忽略：first-child伪类选择器，仅将样式应用于：hover伪类。

期待CSS3 (Looking Forward to CSS3)

In addition to the pseudo-classes laid down in CSS 2.1, CSS 3 provides sixteen new pseudo-classes to allow for even more detailed styling capabilities. The new pseudo-classes are:

除了CSS 2.1中规定的伪类之外，CSS 3还提供了16种新的伪类，以提供更详细的样式功能。 新的伪类是：

`

`

• :nth-child(N)

  ：nth-​​child(N)

• :nth-last-child(N)

  ：nth-​​last-child(N)

• :nth-of-type(N)

  ：nth-​​of-type(N)

• :nth-last-of-type(N)

  ：nth-​​last-of-type(N)

• :last-child

  ：最后一个孩子

• :first-of-type

  ：第一类型

• :last-of-type

  ：最后类型

• :only-child

  ：唯一的孩子

• :only-of-type

  ：仅类型

• :root

  ：根

• :empty

  ：空

• :target

  ：目标

• :enabled

  ：启用

• :disabled

  ：禁用

• :checked

  ：已检查

• :not(S)

  ：不是

`

`

For more information about the new pseudo-class selectors laid down in CSS3, take a look at the CSS3 selectors working draft, or the excellent write-up by Roger Johansson. Currently, very few have decent cross-browser support, but as Johansson says, they can still be used for progressive enhancement…and in such a quickly changing field, when we can stay ahead of the curve, we should take advantage of it.

有关CSS3中设置的新伪类选择器的更多信息，请查看CSS3选择器的工作草案或Roger Johansson的出色文章。 当前，很少有像样的跨浏览器支持，但是正如Johansson所说，它们仍然可以用于渐进式增强……在如此快速变化的领域中，当我们能够保持领先地位时，我们应该利用它。

翻译自: https://timkadlec.com/2008/04/phantom-css/

幻影pin