css 属性选择器_CSS选择器：属性选择器

本是古典何须时尚 2022-12-03 09:59 247阅读 0赞

css 属性选择器

![cssmasterthumb][]

*The following is an extract from our book, [CSS Master][], written by Tiffany B. Brown. Copies are sold in stores worldwide, or you can [buy it in ebook form here][CSS Master].*

*以下是Tiffany B. Brown所著《 [CSS Master》][CSS Master]一书的摘录。* *副本在世界各地的商店中都有出售，或者您可以[在此处以电子书形式购买][CSS Master] 。*

**Attribute selectors** match elements based on their attributes. This can be an attribute alone, such as `[type]`, or it can be an attribute and value combination, such as `[type=checkbox]` or `[for="email"]`.

**属性选择器**根据其属性匹配元素。 这可以是单独的属性，例如`[type]` ，也可以是属性和值的组合，例如`[type=checkbox]`或`[for="email"]` 。

We can also do attribute presence and substring matching with attribute selectors. For example, we can match attribute values in a space-separated list, or we can match attribute values that start with `tel:`. We can even match hyphenated attribute values such as `en-US`.

我们还可以使用属性选择器进行属性存在和子字符串匹配。 例如，我们可以匹配以空格分隔的列表中的属性值，也可以匹配以`tel:`开头的属性值。 我们甚至可以匹配带连字符的属性值，例如`en-US` 。

Some of the attribute selectors we’ll cover here are old hat. Both the hyphenated attribute value selector and the space-separated attribute value selector were defined in CSS2. Selectors Level 3, on the other hand, adds a few powerful selectors that let us match partial attribute values.

我们将在这里介绍的某些属性选择器是旧帽子。 连字符属性值选择器和以空格分隔的属性值选择器均在CSS2中定义。 另一方面，选择器级别3增加了一些功能强大的选择器，可让我们匹配部分属性值。

We’ll focus on the new and lesser-known attribute selectors in this section. Let’s take a look.

在本节中，我们将重点介绍新的和鲜为人知的属性选择器。 让我们来看看。

### 匹配属性存在 **(**Matching Attribute Presence**)** ###

It’s common to match elements based on the exact value of their attributes. Reset style sheets commonly use selectors selector such as `[type=text]` and `[type=email]`. But we can also match attributes when there are multiple space-separated values. We need to use our space-separated attribute value selector: `[att~=val]`.

通常根据元素的确切值来匹配元素。 重置样式表通常使用选择器选择器，例如`[type=text]`和`[type=email]` 。 但是，当存在多个以空格分隔的值时，我们也可以匹配属性。 我们需要使用以空格分隔的属性值选择器： `[att~=val]` 。

The space-separated attribute value selector matches elements with the attribute `att` and a list of values, one of which is `val`. This can be any attribute that accepts space-separated values, including `class` or `data-*`.

以空格分隔的属性值选择器将元素与属性`att`和值列表匹配，其中一个值为`val` 。 这可以是任何接受以空格分隔的值的属性，包括`class`或`data-*` 。

Space-separated lists of attributes are admittedly uncommon. They are sometimes used with the `rel` attribute and [microformats][] to describe relationships between people and documents. We might mark up an external link like so:

用空格分隔的属性列表是罕见的。 它们有时与`rel`属性和[微格式一起][microformats]用于描述人与文档之间的关系。 我们可能会像这样标记一个外部链接：

We can then use this presence-based attribute selector to match this link and links like it:

然后，我们可以使用基于状态的属性选择器来匹配此链接和类似的链接：

[rel~=friend] {
        font-size: 2em;
        background: #eee;
        padding: 4px;
        text-decoration: none;
        border-bottom: 3px solid #ccc;
    }
    [rel~=friend]:link,
    [rel~=friend]:visited {
        color: #34444C;
    }
    [rel~=friend]:hover{
        background: #ffeb3b;
        border-color: #ffc107;
    }

This gives us the image in the figure below.

这给了我们下图的图像。

![AttributesSpaceSeparated][]

### 匹配带连字符的属性值 **(**Matching Hyphenated Attribute Values**)** ###

One of the more interesting tasks we can do with attribute selectors is match elements with hyphenated attribute values by using `[attr|=val]`. This selector matches elements by attribute when its value is hyphenated and its prefix equals `val`.

我们可以使用属性选择器执行的更有趣的任务之一是使用`[attr|=val]`具有带连字符属性值的元素匹配。 当选择器的值连字符且其前缀等于`val`时，此选择器将按属性匹配元素。

At first glance, this may seem like a useless selector; however, it’s quite practical for working with languages and language codes—such as `en-US` or `es-MX`—which is its intended use.

乍一看，这似乎是一个无用的选择器。 但是，它是用于语言和语言代码(例如`en-US`或`es-MX`的实用工具，这是它的预期用途。

Let’s say we have a site targeting English speakers. Our site also supports two regional variations in English: United Kingdom and United States. The language codes for these languages are `en-GB` and `en-US` respectively. We’ve also set the language on our `html` tag; for example, `<html lang="en-US">`.

假设我们有一个针对讲英语的网站。 我们的网站还支持两种地区的英语版本：英国和美国。 这些语言的语言代码分别是`en-GB`和`en-US` 。 我们还在`html`标签上设置了语言； 例如`<html lang="en-US">` 。

Our site teaches English speakers to be conversant in French, Spanish, and Portuguese. It contains lots of markup similar to this example:

我们的网站教讲英语的人会说法语，西班牙语和葡萄牙语。 它包含许多类似于此示例的标记：

<p lang="fr-FR"><q>Tout le monde.</q></p>
    <p><q>All the world.</q>, or <q>Everyone</q></p>

Let’s italicize our French text and add language-appropriate angle quotes (« and ») to either side of it:

让我们斜体显示法语文本，并在文本的任何一侧添加与语言相对应的角引号(«和»)：

[lang|="fr"] {
        font-style: italic;
    }
    [lang|="fr"] q:before{
        content: '\00AB'; /* Left angle quote */
    }
    [lang|="fr"] q:after{
        content: '\00BB';  /* Right angle quote */
    }

What’s cool about this selector is that it will also match if the attribute equals the prefix. These styles would also apply to `<p lang="fr">`. We could further limit the scope of these selectors, for example, by adding a `p` element to the `lang` attribute: `p[lang|="fr"]`.

这个选择器的优点是，如果属性等于前缀，它也会匹配。 这些样式也适用于`<p lang="fr">` 。 我们可以进一步限制这些选择器的范围，例如，通过向`lang`属性添加`p`元素： `p[lang|="fr"]` 。

Though intended to be used with language codes, this selector isn’t limited to them. We can use it with any hyphenated attribute value. Consider the following markup:

尽管旨在与语言代码一起使用，但此选择器不限于它们。 我们可以将其与任何带连字符的属性值一起使用。 考虑以下标记：

<article class="articlepromo">
        <h3>U.S. ratifies Kyoto Protocol</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p>
    </article>
    
    <article class="articlepromo-entertainment">
        <h3>Kardashian-Wests welcome South to the world</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p>
    </article>
    
    <article class="articlepromo-sports">
        <h3>New York Knicks win NBA title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p>
    </article>
    
    <article class="articlepromo-business">
        <h3>Google Buys EverythingOnTheInternet.com</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p>
    </article>

These are all article promos or teasers. They share some of the same visual characteristics and behavior, along with an `articlepromo` prefix. Here, too, we can use the hyphenated attribute selector to match these class names:

这些都是商品促销或挑逗。 它们具有一些相同的视觉特征和行为，以及`articlepromo`前缀。 在这里，我们也可以使用连字符属性选择器来匹配这些类名：

[class|="articlepromo"] {
    border-top: 5px solid #4caf50;
    color: #555;
    line-height: 1.3;
    padding-top: .5em;
    }
    
    [class|="articlepromo"] h3 {
    color: #000;
    font-size: 1.2em;
    margin:0;
    }
    
    [class|="articlepromo"] p {
    margin: 0 0 1em;
    }

Follow this up with specific border colors for each section type, and you’ll achieve something along the lines of the layout you see in the figure below.

在此之后，为每种节类型使用特定的边框颜色，您将在下图中看到的布局线条上实现一些目的。

![AttributesHyphenated][]

We can also use it with `id` names; for example, `[id|=global]` would match `#global-footer`, `#global-menu`, and so on.

我们也可以将其与`id`名称一起使用； 例如， `[id|=global]`将匹配`#global-footer` ， `#global-menu`等。

Now, just because you *can* do something doesn’t necessarily mean you *should*. The hyphenated attribute value selector is ideal for styling differences in language. For any other usage, though, you’d do just as well to use a class name selector. Class names provide a lower risk of unintended effects in a large project. They’re also a must if your project still requires Internet Explorer 8 support, since IE8 does not support this selector.

现在，仅仅因为您*可以*做某事并不一定意味着您*应该*这样做。 带连字符的属性值选择器非常适合于设计语言差异。 但是，对于其他用途，您也可以使用类名选择器。 在大型项目中，类名降低了意外影响的风险。 如果您的项目仍需要Internet Explorer 8支持，它们也是必须的，因为IE8不支持此选择器。

### 按子字符串匹配属性值 **(**Matching Attribute Values by Substring**)** ###

We can also select elements when the attribute values match a particular substring. Three character sequences let us match elements depending on whether this substring sits at the beginning, end, or elsewhere in the attribute value:

当属性值匹配特定的子字符串时，我们也可以选择元素。 通过三个字符序列，我们可以根据此子字符串位于属性值的开头，结尾还是其他位置来匹配元素：

`^=` `^=`

matches when the substring sits at the beginning of the string.

当子字符串位于字符串的开头时匹配。

`$=` `$=`

matches when the substring sits at the end of the string.

当子字符串位于字符串末尾时匹配。

`*=` `*=`

matches when the substring is present at any position within the string.

当子字符串出现在字符串中的任何位置时匹配。

When might these selectors come in handy? Think about links using `tel:` (non-standard) or `mailto:`. Since they behave differently from other hyperlinks, it makes sense to style them differently just as a hint to the user. Take the *Call this business* link:

这些选择器何时会派上用场？ 考虑使用`tel:`非标准)或`mailto:` 。 由于它们的行为与其他超链接不同，因此有必要对它们进行样式设置，以提示用户。 点击*致电此业务*链接：

<a href="tel:+14045555555">Call this business</a>

We can select this and other `tel:` links by using the `^=` character sequence: `[href^="tel:"]`. Let’s add some declarations:

我们可以使用`^=`字符序列： `[href^="tel:"]`来选择此和其他`tel:`链接。 让我们添加一些声明：

[href^="tel:"] {
        background: #2196f3 url(../images/phone-icon.svg) 10px center / 20px auto no-repeat;
        border-radius: 100px;
        padding: .5em 1em .5em 2em;
    }

You can see the result in the figure below.

您可以在下图中看到结果。

![AttributeSubstring1][]

To match elements when the attribute value *ends* with a substring, change `^` to `$`. If, for some odd reason―and let me emphasize that it would be odd―we wanted to match the last four digits of our phone number (5555), we might use the following:

要在属性值以子字符串*结尾*时匹配元素，请将`^`更改为`$` 。 如果出于某种奇怪的原因(我想强调这很奇怪)，我们希望匹配电话号码的最后四位数字(5555)，则可以使用以下代码：

[href$="5555"] {
        background: #e91e63;
    }

It’s more useful, obviously, to match elements that end with the same suffix. For example, you could match both `<aside class="sports-sidebar">` and `<aside class="arts-sidebar">` with `[class$=sidebar]`.

显然，匹配以相同后缀结尾的元素更有用。 例如，您可以将`<aside class="sports-sidebar">`和`<aside class="arts-sidebar">`与`[class$=sidebar]`匹配。

Using `$=` won’t, however, match an element with the class name `sports-sidebar-a`. For that we’d need to use the `*=` sequence. Changing our selector to `[class*=sidebar]` does the job.

但是，使用`$=`不会将元素与类名`sports-sidebar-a`匹配。 为此，我们需要使用`*=`序列。 将选择器更改为`[class*=sidebar]`完成工作。

Most of the new selectors added in CSS3 and CSS4 are not attribute selectors at all. They’re pseudo-classes or pseudo-elements. We’ll discuss these over the next few sections.

CSS3和CSS4中添加的大多数新选择器根本不是属性选择器。 它们是伪类或伪元素。 我们将在接下来的几节中讨论这些内容。

> 翻译自: [https://www.sitepoint.com/css-selectors-attribute-selectors/][https_www.sitepoint.com_css-selectors-attribute-selectors]

css 属性选择器

[cssmasterthumb]: /images/20221123/fda7fb4b259f4cf3aa7b3cfd1c58ebf3.png
[CSS Master]: https://www.sitepoint.com/premium/books/css-master
[microformats]: http://microformats.org/wiki/existing-rel-values
[AttributesSpaceSeparated]: /images/20221123/7e7d752dc6834b718c447637b1de9486.png
[AttributesHyphenated]: /images/20221123/7b959a4093584ff8b6f02733a3acc029.png
[AttributeSubstring1]: /images/20221123/392e95bb42f945a7b4fd58347a87f411.png
[https_www.sitepoint.com_css-selectors-attribute-selectors]: https://www.sitepoint.com/css-selectors-attribute-selectors/