Почему мой селектор атрибутов работает, если в нем нет пробелов?

Question

MDN сообщает следующее о селекторе атрибута [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>

Answer 1

В нем сказано: «список слов, разделенных пробелами»

Это означает, что это список, разделенный пробелами.Но в списке может быть только один элемент.Так что в этом случае пробелы не нужны.

Answer 2

Список слов содержит разделители между словами.Если список содержит только одно слово, разделителей нет

Answer 3

Это означает, что атрибут (в данном случае data-vegetable) может иметь несколько значений, присвоенных ему в одной строке, используя пробел для разделения значений, например data-vegetable="liquid foo bar", что дает data-vegetable три значения жидкости',' foo 'и' bar '.

Селектор можно использовать для сопоставления с любым из этих значений, поэтому вы получите этот элемент при сопоставлении либо [data-vegetable~="liquid"], [data-vegetable~="foo"], либо [data-vegetable~="bar"].

Answer 4

Это не , разделенный пробелами , но:

список слов, разделенных пробелами

Что означает список слов, в которых вы имеетеПробел между и, если он один, не нужен, потому что нечего отделять.

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