和一个简单的样式表：

/* 
    具有"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- 开头的元素（-用来处理语言编码）。
• [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;
}

有了这些新的规则，我们会得到这个：

例： 给足球比赛结果添加样式

<ol>
  <li lang="en-GB" data-perf="inc-pro">Manchester United</li>
  <li lang="es" data-perf="same-pro">Barcelona</li>
  <li lang="de" data-perf="dec">Bayern Munich</li>
  <li lang="es" data-perf="same">Real Madrid</li>
  <li lang="de" data-perf="inc-rel">Borussia Dortmund</li>
  <li lang="en-GB" data-perf="dec-rel">Southampton FC</li>
</ol>

添加属性选择器到一些规则来创建一个简单的足球结果列表。 这里有三件事要做：

• 前三个规则分别在列表项的左侧添加英国，德国和西班牙国旗图标。 您需要填写适当的属性选择器，以便团队获得正确的国家标志，并配合语言。
• 规则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字符串进行匹配。