Szczegółowy wybór atrybutów CSS

CSS 2 wprowadził selektory atrybutów.

Selektory atrybutów mogą wybierać elementy na podstawie atrybutów i ich wartości.

Prosty selektor atrybutu

Jeśli chcesz wybrać elementy z określonym atrybutem, niezależnie od wartości tego atrybutu, można użyć prostego selektora atrybutu.

Example 1

Jeśli chcesz zmienić na czerwony wszystkie elementy zawierające tytuł (title), możesz napisać:

*[title] {color:red;}

Spróbuj sam!

Example 2

Podobnie jak wyżej, można zastosować styl do linków (elementów a) z atrybutem href:

a[href] {color:red;}

Spróbuj sam!

Przykład 3

Można również wybierać na podstawie wielu atrybutów, wystarczy połączyć selektory atrybutów.

For example, to set the text of HTML hyperlinks with both href and title attributes to red, you can write it like this:

a[href][title] {color:red;}

Spróbuj sam!

Example 4

Creative methods can be used to take advantage of this feature.

For example, you can apply styles to all images with the alt attribute to highlight these valid images:

img[alt] {border: 5px solid red;}

Spróbuj sam!

Wskazówka:This particular case is more suitable for diagnosis rather than design, that is, to determine whether the image is indeed valid.

Example 5: Using attribute selectors for XML documents

Attribute selectors are quite useful in XML documents because the XML language advocates specifying element names and attribute names for the purpose of elements and attributes.

Suppose we have designed an XML document to describe the solar system planets. If we want to select all planet elements with the moons attribute to display in red to pay more attention to the planets with moons, we can write it like this:

planet[moons] {color:red;}

This will make the text of the second and third elements in the following mark fragment display as red, but the text of the first element is not red:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Zobacz efekt

Selecting based on specific attribute values

In addition to selecting elements with certain attributes, you can further narrow the selection range to only select elements with specific attribute values.

Example 1

For example, if you want to change the hyperlink pointing to a specified document on a web server to red, you can write it like this:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Spróbuj sam!

Example 2

Similar to simple attribute selectors, multiple attribute-value selectors can be linked together to select a document.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

To change the text of the first hyperlink in the following mark to red, but the second or third link is not affected:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Spróbuj sam!

Przykład 3

Podobnie, język XML może również korzystać z tej metody do ustawiania stylów.

Powracając do przykładu z planetami, załóżmy, że chcesz wybrać elementy planet, które mają wartość atrybutu "moons" równą 1:

planet[moons="1"] {color: red;}

Powyższy kod zmieni drugi element poniższego znacznika na czerwony, ale pierwszy i trzeci elementy nie zostaną dotknięte:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Zobacz efekt

Atrybut musi pasować do wartości atrybutu.

Proszę zauważyć, że ten format wymaga dokładnego dopasowania do wartości atrybutu.

Jeśli wartość atrybutu zawiera listę wartości oddzielonych spacjami, dopasowanie może się popsuć.

Rozważ następujący węzeł znaczkowy:

<p class="important warning">Ten akapit jest bardzo ważnym ostrzeżeniem.</p>

Jeśli napiszesz "p[class="important"]", ta reguła nie pasuje do przykładowego znacznika.

Aby wybrać element na podstawie konkretnej wartości atrybutu, musisz napisać to:

p[class="important warning"] {color: red;}

Spróbuj sam!

Wybór na podstawie częściowego atrybutu wartości.

Jeśli potrzebujesz wybrać na podstawie słowa z listy wartości atrybutu, musisz użyć znaku "~".

Załóżmy, że chcesz wybrać elementy, które zawierają w atrybucie "class" słowo "important", możesz to zrobić za pomocą tego selektora:

p[class~="important"] {color: red;}

Spróbuj sam!

Jeśli pominiemy znak "~", oznacza to, że konieczne jest pełne dopasowanie wartości.

Różnica między selektorem częściowym a notacją klasową.

Ten selektor jest równoważny z tym, co omówiliśmy wcześniej w kontekście notacji klasowej.

To znaczy, że "p.important" i "p[class="important"]" są równoważne w kontekście dokumentu HTML.

Dlaczego mamy więc selektor atrybutu "~="? Ponieważ można go używać z dowolnym atrybutem, a nie tylko z klasą.

Na przykład, dokument zawierający dużą liczbę obrazów, z których tylko niektóre są obrazami. W takim przypadku można użyć selektora częściowego na podstawie atrybutu "title", aby wybrać tylko te obrazy:

img[title~="Figure"] {border: 1px solid gray;}

Ta reguła wybierze wszystkie obrazy z tekstem title zawierającym "Figure". Obrazy bez atrybutu title lub bez "Figure" w atrybucie title nie będą dopasowywane.

Spróbuj sam!

Selektor atrybutu pasujący do podciągu

Poniżej przedstawiam bardziej zaawansowany moduł selektorów, opublikowany po ukończeniu CSS2, który zawiera więcej częściowych selektorów atrybutów. W terminologii normatywnej powinien być nazywany "selektorem atrybutu pasującym do podciągu".

Wiele nowoczesnych przeglądarek obsługuje te selektory, w tym IE7.

Poniższa tabela jest prostym podsumowaniem tych selektorów:

Typy Opis
[abc^="def"] Wybierz wszystkie elementy, w wartości atrybutu abc zaczynające się na "def".
[abc$="def"] Wybierz wszystkie elementy, w wartości atrybutu abc kończące się na "def".
[abc*="def"] Wybierz wszystkie elementy, w wartości atrybutu abc zawierające podciąg "def".

Można pomyśleć, że te selektory mają wiele zastosowań.

Na przykład, jeśli chcesz zastosować styl do wszystkich linków prowadzących do CodeW3C.com, nie musisz przypisywać każdemu z tych linków klasy i pisać stylu na podstawie tej klasy, tylko napisać następującą regułę:

a[href*="codew3c.com"] {color: red;}

Spróbuj sam!

Wskazówka:Każdy atrybut można użyć z tymi selektorami.

Typy specyficznych selektorów atrybutów

Ostatnio przedstawiamy specyficzne selektory atrybutów. Zobacz poniższy przykład:

*[lang|="en"] {color: red;}

Powyższa reguła wybierze wszystkie elementy z atrybutem lang równym en lub zaczynającym się od en-.

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Spróbuj sam!

Ogólnie rzecz biorąc, [att|="val"] można użyć dla każdej atrybutu i jego wartości.

Załóżmy, że w dokumencie HTML znajduje się seria obrazów, gdzie każda nazwa pliku obrazu ma postać: figure-1.jpg i figure-2.jpgMożna użyć następującego selektora, aby dopasować wszystkie te obrazy:

img[src|="figure"] {border: 1px solid gray;}

Spróbuj sam!

Oczywiście, najczęściej używanym zastosowaniem tego selektora atrybutów jest dopasowywanie wartości językowych.

Reference manual CSS选择器

Wybór Opis
[attribute] Wybór elementów z określonym atrybutem.
[attribute=value] Wybór elementów z określonym atrybutem i wartością.
[attribute~=value] Wybór elementów zawierających określone słowo w wartości atrybutu.
[attribute|=value] Wybór elementów z atrybutami zaczynającymi się określonym wartością, która musi być całą nazwą.
[attribute^=value] Dopasowanie każdego elementu zaczynającego się określonym wartością w wartości atrybutu.
[attribute$=value] Dopasowanie każdego elementu kończącego się określonym wartością w wartości atrybutu.
[attribute*=value] Dopasowanie każdego elementu zawierającego określone wartości w wartości atrybutu.