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

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

存在和值(Presence and value)属性选择器

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

  • [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
  • [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
  • [attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。

让我们看一个以下面的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;
}

结果如下:

笔记:本例中的 data-* 属性被称为 数据属性。它们提供了一种在HTML属性中存储自定义数据的方法,由此,这些数据可以轻松地被提取和使用。有关详细信息,请参阅 如何使用数据属性

子串值(Substring value)属性选择器

这种情况的属性选择器也被称为“伪正则选择器”,因为它们提供类似 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;
}

 

有了这些新的规则,我们会得到这个:

主动学习:给足球比赛结果添加样式

在这个积极的学习中,我们希望您尝试添加属性选择器到一些规则来创建一个简单的足球结果列表。 这里有三件事要做:

  • 前三个规则分别在列表项的左侧添加英国,德国和西班牙国旗图标。 您需要填写适当的属性选择器,以便团队获得正确的国家标志,并配合语言。
  • 规则4-6在列表项中添加背景颜色,以指示球队是否已经在联盟中升格(绿色,rgba(0,255,0,0.7)),向下(红色,rgba(255,0,0,0.5)) ),或者留在同一个地方(蓝色,rgba(0,0,255,0.5))。填写适当的属性选择器,以将正确的颜色与正确的队列匹配,并与inc,相同和dec字符串匹配 data-perf属性值。
  • 规则7-8使得被提拔的球队变得勇敢,球队有被降级为斜体和灰色的危险。 填写适当的属性选择器,将这些样式与正确的队列进行匹配,并与data-perf属性值中显示的pro和rel字符串进行匹配。

如果您犯了错误,您可以随时使用重置按钮重设。 如果您确实卡住了,请按显示解决方案按钮查看潜在答案。

接下来是

接下来,我们将把事情放在一起,看伪类和伪元素

文档标签和贡献者

 此页面的贡献者: overcat, xzmshiji, lavenderming, NoName4Me, xgqfrms-GitHub
 最后编辑者: overcat,