Attribute selectors

这篇翻译不完整。请帮忙从英语翻译这篇文章

属性选择器是一种特殊类型的选择器,将根据元素的 attributes和属性值。它们的通用语法由方括号([]) 组成,其中包含属性名称,后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类: 存在和值属性选择器和子串值属性选择器。

存在和值属性选择器

这些属性选择器尝试匹配精确的属性值:

  • [attr] : 选择包含attr属性的元素,忽略attr的值。
  • [attr=val] : 选择attr属性被赋值为val的元素。
  • [attr~=val]: 选择attr属性的值(以空格间隔出多个值)中包含val的元素,比如多个类中的一个类。

让我们看一个以下面的HTML代码片段为例:

我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

和一个简单的样式表:

/* 
    具有"data-vegetable"属性的所有元素,给予绿色文本
*/
[data-vegetable] {
  color: green
}

/* 
    具有"data-vegetable"属性与精确值"liquid"的所有元素,给予金色背景颜色 
*/
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* 
    具有"data-vegetable"属性,包含值"spicy", 
    甚至在其中的所有元素,给出红色文本颜色 
*/
[data-vegetable~="spicy"] {
  color: red;
}

结果如下:

子串值属性选择器

此处的属性选择器也称为“伪正则选择器”,因为它们提供类似 regular expression 的灵活匹配方式(但请注意,这些选择器并不是真正的正则表达式):

  • [attr|=val] : 选择attr属性的值以val(包括val)或val-开头的元素(-用来处理语言编码)。
  • [attr^=val] : 选择attr属性的值以val开头(包括val)的元素。
  • [attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。
  • [attr*=val] : 选择attr属性的值中包含字符串val的元素。

让我们继续我们前面的例子,并添加以下CSS规则:

/* 语言选择的经典用法 */
[lang|=fr] {
  font-weight: bold;
}

/* 
    具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色
*/
[data-vegetable*="not spicy"] {
  color: green;
}

/* 
   具有"data-quantity"属性其值以"kg"结尾的所有元素*/
[data-quantity$="kg"] {
  font-weight: bold;
}

/* 
   具有属性"data-quantity"其值以"optional"开头的所有元素 
*/
[data-quantity^="optional"] {
  opacity: 0.5;
}

 

With those new rules, we will get this:

主动学习:设计足球比赛结果

In this active learning, we'd like you to try your hand at adding attribute selectors to some rules to style a simple football results listing. There are three things to try to do here:

  • The first three rules add a UK, German, and Spanish flag icon respectively to the left hand side of the list items. You need to fill in appropriate attribute selectors so that the teams are given their correct country flags, matched by language.
  • Rules 4–6 add a background color to the list items to indicate whether the team has gone up in the league (green, rgba(0,255,0,0.7)), down (red, rgba(255,0,0,0.5)), or stayed in the same place (blue, rgba(0,0,255,0.5).)  Fill in the appropriate attribute selectors to match the correct colors to the correct teams, matched by the inc, same and dec strings that appear in the data-perf attribute values.
  • Rules 7–8 make teams that are set to be promoted bold, and teams that are in danger of being relegated italic and gray. Fill in appropriate attribute selectors to match these styles to the correct teams, matched by the pro and rel strings that appear in the data-perf attribute values.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

Coming up next

Next we will move things up a gear, looking at Pseudo-classes and pseudo-elements.

文档标签和贡献者

标签: 
 此页面的贡献者: NoName4Me, xgqfrms-GitHub
 最后编辑者: NoName4Me,