代码之家 › 专栏 › 技术社区 › Robert

当属性选择器中没有空白时,为什么它会工作?

css-selectors css html

Robert · 技术社区 · 6 年前

MDN states 以下是关于 [attr~=value] 属性选择器:

表示属性名为attr的元素,其值为以空格分隔的单词列表,其中一个正好是值。

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

4 回复 | 直到 6 年前

Temani Afif 6 年前

它不是 用空格分隔 但是:

以空格分隔的单词列表

这意味着一个单词列表,其中有介于和之间的空格,如果单独使用,则不需要空格,因为没有要分隔的内容。

[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>