Najnowsze tutoriale tworzenie stron internetowych
 

CSS selektory atrybutów

❮ Poprzedni Następny rozdział ❯

Elementy stylu HTML z dodatkowych atrybutów

Jest możliwe, aby projektować elementy HTML, które mają szczególne cechy lub wartości atrybutu.

CSS [atrybut] Selektor

[attribute] Selektor służy do wybierania elementów o określonym atrybucie.

Poniższy przykład wybiera wszystkie <a> elementy z atrybutem target:

Przykład

a[target] {
    background-color: yellow;
}
Spróbuj sam "

CSS [atrybut = "wartość"] Selektor

[attribute="value"] Selektor służy do wybierania elementów o określonym atrybucie i wartości.

Poniższy przykład wybiera wszystkie <a> elementy o target="_blank" atrybut:

Przykład

a[target="_blank"] {
    background-color: yellow;
}
Spróbuj sam "

CSS [atrybut ~ = "wartość"] Selektor

[attribute~="value"] Selektor służy do wybierania elementów z wartością atrybutu zawierające określone słowo.

Poniższy przykład wybiera wszystkie elementy z atrybutem tytuł, który zawiera listę oddzielonych spacjami wyrazów, z których jedna jest " flower ":

Przykład

[title~="flower"] {
    border: 5px solid yellow;
}
Spróbuj sam "

W powyższym przykładzie będzie pasował do elementów z title="flower", title="summer flower" oraz title="flower new" , ale nie title="my-flower" lub title="flowers" .

CSS [atrybut | = "wartość"] Selektor

[attribute|="value"] Selektor służy do wybierania elementów z określonym atrybutem zaczynające się od podanej wartości.

Poniższy przykład wybiera wszystkie elementy, których wartość atrybutu klasy, który zaczyna się od "top" :

Uwaga: Wartość musi być całe słowo, albo sam, jak class="top" , a następnie myślnik ( - ) , jak class="top-text" !

Przykład

[class|="top"] {
    background: yellow;
}
Spróbuj sam "

CSS [atrybut ^ = "wartość"] Selektor

[attribute^="value"] Selektor służy do wybierania elementów, których wartość atrybutu zaczyna się od określonej wartości.

Poniższy przykład wybiera wszystkie elementy, których wartość atrybutu klasy, który zaczyna się od "top" :

Uwaga: Wartość nie musi być całe słowo!

Przykład

[class^="top"] {
    background: yellow;
}
Spróbuj sam "

CSS [atrybut $ = "wartość"] wybierak

[attribute$="value"] Selektor służy do wybierania elementów, których wartość atrybutu kończy określonej wartości.

Poniższy przykład wybiera wszystkie elementy, których wartość atrybutu klasy, która kończy się "test" :

Uwaga: Wartość nie musi być całe słowo!

Przykład

[class$="test"] {
    background: yellow;
}
Spróbuj sam "

CSS [atrybut * = "wartość"] Selektor

[attribute*="value"] Selektor służy do wybierania elementów, których wartość atrybutu zawiera określoną wartość.

Poniższy przykład wybiera wszystkie elementy, których wartość atrybutu klasy, który zawiera "te" :

Uwaga: Wartość nie musi być całe słowo!

Przykład

[class*="te"] {
    background: yellow;
}
Spróbuj sam "

Formy Stylizacja

Selektory atrybutów mogą być przydatne dla form stylizacji bez class lub ID :

Przykład

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}
Spróbuj sam "

Wskazówka: Odwiedź Forms CSS więcej przykładów, w jaki sposób projektować formularze z CSS.

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 » Ćwiczenia 6»

Więcej Przykłady CSS selektorów

Skorzystaj z naszej CSS Selector Tester do wykazania różnych selektorów.

Pełną odniesienia wszystkich selektorów CSS, przejdź do naszej CSS selektory Reference .


❮ Poprzedni Następny rozdział ❯