html - 为什么我的属性选择器中没有任何空格时它可以工作？

Question

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

表示属性名称为 attr 的元素，其值是由空格分隔的单词列表，其中一个正是 value。

如果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>

标签： htmlcsscss-selectors

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>