css 属性选择器
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.
以下是Tiffany B. Brown所著《 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.
在本节中，我们将重点介绍新的和鲜为人知的属性选择器。 让我们来看看。
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属性和微格式一起用于描述人与文档之间的关系。 我们可能会像这样标记一个外部链接：
<a href="http://example.com/" rel="external friend">Bob</a>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.
这给了我们下图的图像。
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.
在此之后，为每种节类型使用特定的边框颜色，您将在下图中看到的布局线条上实现一些目的。
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不支持此选择器。
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.
您可以在下图中看到结果。
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/
css 属性选择器
