Różnica CSS między selektorami atrybutu a tyldą i gwiazdą?

Question

Przy następujących selektorów CSS

[attribute~=value] { } 
[attribute*=value] { } 

Jeżeli oba selektorów powyżej robić dokładnie to samo? Czy jest różnica?

Wierzę, że jest jakaś różnica, ale co? Jedyne, co dostrzegam, to to, że pierwsza z każdej pary jest w specyfikacji CSS 2, a druga w specyfikacji CSS 3.
Czy jest coś jeszcze?

Fiddle

Answer 1

Pierwszy służy do wyboru elementów, które zawierają cały konkretne słowo. Ten ostatni służy do wyboru dowolnego ograniczenia łańcucha, nie musi to być całe słowo.

div { 
 
    padding: 30px; 
 
} 
 

 
/* Matches "foo", but not "fo" */ 
 
[attribute~=foo] { 
 
    background: lightcoral; 
 
} 
 

 
/* Matches both "bar" and "ba" */ 
 
[attribute*=ba] { 
 
    background: lavender; 
 
}

<div attribute="foo"></div> 
 
<div attribute="bar"></div>

Answer 2

The ~= nazywa Attribute Contains Word Selector.

Więc kiedy używać: [attrName~=stuff] będzie on pasował do każdego elementu, który ma attrName „s wartość równą"stuff" lub zawierających "stuff ", " stuff " lub " stuff". Przykłady:

• Selector: [name~=ball]
• zestawienia:
  • <input name="ball" type="text">
  • <input name="ball " type="text">
  • <input name=" ball" type="text">
  • <input name=" ball " type="text">
  • <input name="doesnotmatter ball asLongAsballIsBetweenWhiteSpaces" type="text">

---

The *= nazywa Attribute Contains Substring Selector.

Podczas korzystania [attrName*=stuff] będzie on pasował jeśli stuff występuje w wartości atrybutu, nawet jeśli wewnątrz jakiegoś słowa, takie jak:

• Selector: [name*=ball]
• zestawienia:
  • Wszyscy które zostały dopasowane przez [name~=ball], ale także ...
  • <input name="whatball" type="text">
  • <input name="ballwhat" type="text">
  • <input name="whatballwhat" type="text">
  • i tak dalej, tak długo jak wartość atrybutu zawiera ciąg ball.

---

Uwaga: linki powyżej temperatury do strony jQuery tylko dlatego, dla tych szczególnych selektorów, znajdę ich odniesienie się być najlepszym, ale tych atrybutów selektorów są od CSS 2.1 i have been supported since IE7.

MSDN wywołuje również zawierający słowo selektor Whitespace Attribute Selector.

Wreszcie click here for a demo fiddle.