iso-3166-伪2_伪类-基础

小灰灰 2022-12-03 01:47 142阅读 0赞

iso-3166-伪2

*The following is an extract from our book, [HTML5 & CSS3 for the Real World, 2nd Edition][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][HTML5 _ CSS3 for the Real World_ 2nd Edition].*

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

### 伪类 **(**Pseudo-classes**)** ###

It’s likely that you’re already familiar with some of the user interaction pseudo-classes, namely `:link`, `:visited`, `:hover`, `:active`, and `:focus`.

您可能已经熟悉一些用户交互伪类，即`:link` ， `:visited` ， `:hover` ， `:active`和`:focus` 。

#### 重要事项：注意事项 **(**Important: Key Points to Note**)** ####

There are security issues the `:visited` pseudo-class can pose, so browsers do not support all CSS properties on visited links. Without these limitations, malicious sites could apply a style to a visited link, such as a unique background image for each visited link, to check whether popular sites or banks have been visited by the user. This allows the attacker to glimpse the user’s browsing history without their permission. As a result, modern browsers limit the styles that can be applied with `:visited`.

`:visited`伪类可能带来安全问题，因此浏览器不支持访问的链接上的所有CSS属性。 在没有这些限制的情况下，恶意站点可以对访问的链接应用一种样式，例如为每个访问的链接提供唯一的背景图像，以检查用户是否访问了受欢迎的站点或银行。 这使攻击者无需他们的许可即可浏览用户的浏览历史记录。 结果，现代浏览器限制了`:visited`可以应用的样式。

The spec explicitly condones these changes, saying: UAs \[User Agents\] may, therefore, treat all links as unvisited links, or implement other measures to preserve the user’s privacy while rendering visited and unvisited links differently.

规范明确允许这些更改，说：UA \[用户代理\]可以将所有链接视为未访问的链接，或实施其他措施来保护用户的隐私，同时以不同的方式呈现已访问和未访问的链接。

For better accessibility, add `:focus` wherever you include `:hover` as not all visitors will use a mouse to navigate your site.

为了获得更好的可访问性，请在包括`:hover`任何地方添加`:focus`因为并非所有访问者都会使用鼠标来导航您的站点。

`:hover` can apply to any element on the page not just links and form controls.

`:hover`可以应用于链接和表单控件，还可以应用于页面上的任何元素。

`:focus` and `:active` are relevant to links, form controls, content editable elements, and any element with a tabindex attribute.

`:focus`和`:active`与链接，表单控件，内容可编辑元素以及具有tabindex属性的任何元素有关。

While it’s likely you’ve been using these basic pseudo-classes for some time, there are many others available. Several of these pseudo-classes have been in the specification for years, but weren’t supported (or commonly known) until browsers started supporting the new HTML5 form attributes that made them more relevant.

虽然您可能已经使用这些基本伪类一段时间了，但还有许多其他可用的方法。 这些伪类中的几种已经在规范中使用了多年，但直到浏览器开始支持使它们更加相关的新HTML5表单属性时，才被支持(或众所周知)。

The following pseudo-classes match elements based on attributes, user interaction, and form control state:

以下伪类根据属性，用户交互和表单控件状态来匹配元素：

`:enabled` A user interface element that’s enabled, which is basically any form control that supports the `disabled` attribute but doesn’t currently have it applied.

`:enabled`的用户界面元素，基本上是任何支持`disabled`属性但当前未应用该属性的窗体控件。

`:disabled` Conversely, a user interface element that is `disabled:` any form control that supports the disabled attribute and currently has it applied.

`:disabled`相反， `:disabled`的用户界面元素`disabled:`任何支持disable属性并且当前已应用该属性的窗体控件。

`:checked` For radio buttons or checkboxes that are selected or ticked.

`:checked`对于`:checked`或勾选的单选按钮或复选框。

`:indeterminate` For form elements that are neither checked nor unchecked. For example, if you tick a check all checkbox to select a group of checkboxes, then deselect some but not all of the checkboxes in the group, the check all could be set to the indeterminate state (with JavaScript) to indicate that it’s neither checked nor unchecked.

`:indeterminate`对于未选中或未选中的表单元素。 例如，如果您勾选了“全部选中”复选框以选择一组复选框，然后取消选择了该组中的某些但不是全部复选框，则可以将“全部选中”设置为不确定状态(使用JavaScript)以表明未选中也没有检查。

`:target` This selector singles out the element that is the target of the currently active intrapage anchor. That sounds more complicated than it is: you already know that you can have links to anchors within a page by using the \# character with the ID of the target. For example, you may have [Skip to content][] link in your page that, when clicked, will jump to the element with an ID of content.

`:target`此选择器将选择作为当前活动页内锚点目标的元素。 这听起来比实际要复杂：您已经知道可以通过使用＃字符和目标ID来链接到页面内的锚点。 例如，您可能在页面中具有“ [跳至内容”][Skip to content]链接，单击该链接将跳至具有内容ID的元素。

This changes the URL in the address bar to `thispage.html#contentand the``:target` selector now matches the element in the document that has content as its ID. It’s as if you had included, temporarily, the selector \#content. We say temporarily because as soon as the user clicks on a different anchor, `:target` will match the new target.

这会将地址栏中的URL更改为`thispage.html#contentand the` `:target`选择器现在与以ID为内容的文档中的元素匹配。 就像您暂时包含了选择器\#content一样。 我们之所以说是暂时的，是因为用户单击其他锚点后， `:target`将匹配新的目标。

`:default` Applies to one or more UI elements that are the default among a set of similar elements. For example, the one radio button in a group of same-named radio buttons that was checked on page load will continue to match `:default``after another radio button in the same-named group is selected. Similarly, checkboxes that are selected on page load will continue to match``:default` after they are unchecked.

`:default`适用于一个或多个UI元素，它们是一组相似元素中的默认元素。 例如，在页面加载时选中的一组同名单选按钮中的一个单选按钮将继续匹配`:default` `after another radio button in the same-named group is selected. Similarly, checkboxes that are selected on page load will continue to match` `after another radio button in the same-named group is selected. Similarly, checkboxes that are selected on page load will continue to match` `:default` 。

`:valid` Applies to elements that are valid, based on the type, pattern, or other input attributes (as we discussed in Chapter 4).

`:valid`适用于基于类型，模式或其他输入属性的有效元素(如我们在第4章中所述)。

`:invalid` Applies to empty required elements and elements failing to match the requirements defined by the type or pattern attributes.

`:invalid`适用于清空必需的元素以及不符合类型或模式属性定义的要求的元素。

`:in-range` Applies to elements with range limitations where the value is within those limitations. This applies, for example, to date/time, number, and range input types with min and max attributes. When the value is null, it is `:in-range`.

`:in-range`适用于具有范围限制的元素，其值在这些限制之内。 例如，这适用于具有min和max属性的日期/时间，数字和范围输入类型。 如果该值为null，则为`:in-range` 。

`:out-of-range` The opposite of `:in-range:` elements whose value is outside the limitations of their range. Missing values are not out of range, as they are empty.

`:out-of-range` `:in-range:`的相反值，其值超出其范围的限制。 缺少的值不超出范围，因为它们为空。

`:required` Applies to form controls that have the `:required` attribute set.

`:required`适用于设置了`:required`属性的表单控件。

`:optional` Applies to all form controls that do not have the `:required` attribute.

`:optional`适用于所有没有`:required`属性的表单控件。

`:read-only` Applies to elements whose contents are unable to be altered by the user. This is most elements other than those with the `contenteditable` attribute set and form fields.

`:read-only`适用于其内容不能被用户更改的元素。 这是除具有`contenteditable`属性集和表单字段的元素以外的大多数元素。

`:read-write` Applies to elements whose contents are user-alterable, such as `contenteditable`components and writable input fields.

`:read-write`适用于内容可由用户更改的元素，例如， `contenteditable`组件和可写的输入字段。

Browser support for these attributes is complete in browsers that support the attributes in their form controls; in other words, browsers that support required and pattern also support the associated `:valid` and `:invalid` pseudo-classes.

浏览器对这些属性的支持在支持其表单控件中的属性的浏览器中完成。 换句话说，支持required和pattern的浏览器还支持关联的`:valid`和`:invalid`伪类。

IE8 and earlier lack support for :checked, :enabled, :disabled, and :target. The good news is that IE9 does support these selectors, but not the user-interface selectors. IE10 and IE11 support `:indeterminate`, `:required`, and `:optional`, but not `:default`, `:in-range`, `:out-of-range`, `:read-only`, or `:read-write`.

IE8和更早的版本不支持：checked，：enabled，：disabled和：target。 好消息是IE9确实支持这些选择器，但不支持用户界面选择器。 IE10和IE11支持`:indeterminate` ， `:required`和`:optional` ，但不支持`:default` ， `:in-range` ， `:out-of-range` ， `:read-only`或`:read-write` 。

While support is still lacking, JavaScript libraries such as [Selectivizr][] can help in targeting these pseudo-classes in Internet Explorer.

尽管仍然缺乏支持，但是[Selectivizr之][Selectivizr]类JavaScript库可以帮助在Internet Explorer中定位这些伪类。

> 翻译自: [https://www.sitepoint.com/pseudo-classes-the-basics/][https_www.sitepoint.com_pseudo-classes-the-basics]

iso-3166-伪2

[HTML5 _ CSS3 for the Real World_ 2nd Edition]: https://www.sitepoint.com/premium/books/html5-css3-for-the-real-world-2nd-edition
[Skip to content]: https://www.sitepoint.com/pseudo-classes-the-basics/#content
[Selectivizr]: http://selectivizr.com/
[https_www.sitepoint.com_pseudo-classes-the-basics]: https://www.sitepoint.com/pseudo-classes-the-basics/