Question

MDN states关于[attr~=value]属性选择器的以下内容：

表示属性名称为attr的元素，其值为a 空格分隔的单词列表，其中之一就是值。

如果liquid没有用空格分隔，那么为什么起作用？

[data-vegetable~="liquid"] {
  color: red;
}

Ingredients for my recipe: <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>

Answer 1

它不是用空格分隔，而是：

用空格分隔的单词列表

这是一个单词列表，其中您之间有空格，如果没有单独的空格，则不需要空格。

[data-vegetable~="liquid"] {
  color: red;
}

<ul>
  <li data-vegetable="liquid other and other">this one</li>
  <li data-vegetable="liquid">and this one</li>
  <li data-vegetable="liquid   ">also this one</li>  
  <li data-vegetable="another liquid   ">also this one</li>
  <li data-vegetable="liquid-one">NOT this one !!</li>
  <li data-vegetable="another-liquid">NOT this one !!</li>
  <li data-vegetable="aliquid">NOT this one !!</li>
</ul>

对于最后一个，您将需要*

[data-vegetable*="liquid"] {
  color: red;
}

<ul>
  <li data-vegetable="liquid other and other">this one</li>
  <li data-vegetable="liquid">and this one</li>
  <li data-vegetable="liquid   ">also this one</li>  
  <li data-vegetable="another liquid   ">also this one</li>
  <li data-vegetable="liquid-one">this one too!!</li>
  <li data-vegetable="another-liquid">this one too!!</li>
  <li data-vegetable="aliquid">this one too!!</li>
</ul>

Answer 2

单词列表在单词之间具有分隔符。如果列表仅包含一个单词，则没有分隔符

Answer 3

这就是说，属性（在这种情况下为data-vegetable）可以有多个值，并在一个字符串中使用空格将其赋值，以空格定界，例如data-vegetable="liquid foo bar"，从而得到{{1 }}三个值“ liquid”，“ foo”和“ bar”。

选择器可用于匹配任何这些值，因此在匹配data-vegetable，[data-vegetable~="liquid"]或[data-vegetable~="foo"]时将获得此元素。

Answer 4

它说：“空格分隔的单词列表”

这意味着它是一个列表，由空格分隔。但是列表只能包含一项。因此，在这种情况下，不需要空格。

当属性选择器中没有空格时，为什么它可以工作？

4 个答案: