Ultimele tutoriale de dezvoltare web
 

CSS Caracteristica Selectori

❮ precedent Capitolul următor ❯

Elemente de stil HTML cu atribute specifice

Este posibil să se elementele de stil HTML care au atribute specifice sau valori ale atributului.

CSS [atribut] Selector

[attribute] selectorul este folosit pentru a selecta elemente cu un atribut specificat.

Exemplul următor selectează toate <a> elemente cu un atribut țintă:

Exemplu

a[target] {
    background-color: yellow;
}
Încearcă - l singur »

CSS [atribut = "valoare"] Selector

[attribute="value"] selectorul este folosit pentru a selecta elemente cu un atribut și o valoare specificată.

Exemplul următor selectează toate <a> elemente cu un target="_blank" atribut:

Exemplu

a[target="_blank"] {
    background-color: yellow;
}
Încearcă - l singur »

CSS [atribut ~ = "valoare"] Selector

[attribute~="value"] selectorul este folosit pentru a selecta elemente cu o valoare a atributului care conține un cuvânt specificat.

Exemplul următor selectează toate elementele cu un atribut titlu care conține o listă separată cu spațiu de cuvinte, dintre care unul este „ flower “:

Exemplu

[title~="flower"] {
    border: 5px solid yellow;
}
Încearcă - l singur »

Exemplul de mai sus se va potrivi cu elemente din title="flower", title="summer flower" de title="flower new" title="my-flower" title="flowers" title="flower", title="summer flower" , și title="flower new" , dar nu title="my-flower" sau title="flowers" .

CSS [atribut | = "valoare"] Selector

[attribute|="value"] selector este folosit pentru a selecta elemente cu specified atributul începând cu valoarea specificată.

Exemplul următor selectează toate elementele cu o valoare atribut de clasă , care începe cu "top" :

Notă: Valoarea trebuie să fie un cuvânt întreg, fie singur, cum ar fi class="top" , sau urmată de o liniuță ( - ) , cum ar fi class="top-text" !

Exemplu

[class|="top"] {
    background: yellow;
}
Încearcă - l singur »

CSS [atribut ^ = "valoare"] Selector

[attribute^="value"] selectorul este folosit pentru a selecta elementele a căror valoare atribut începe cu o valoare specificată.

Exemplul următor selectează toate elementele cu o valoare atribut de clasă , care începe cu "top" :

Notă: Valoarea nu trebuie să fie un cuvânt întreg!

Exemplu

[class^="top"] {
    background: yellow;
}
Încearcă - l singur »

CSS [atribut $ = "valoare"] Selector

[attribute$="value"] selectorul este folosit pentru a selecta elementele a căror valoare atribut se termină cu o valoare specificată.

Exemplul următor selectează toate elementele cu o valoare atribut de clasă care se termină cu "test" :

Notă: Valoarea nu trebuie să fie un cuvânt întreg!

Exemplu

[class$="test"] {
    background: yellow;
}
Încearcă - l singur »

CSS [atribut * = "valoare"] Selector

[attribute*="value"] selectorul este folosit pentru a selecta elementele a căror valoare atribut conține o valoare specificată.

Exemplul următor selectează toate elementele cu o valoare atribut de clasă care conține "te" :

Notă: Valoarea nu trebuie să fie un cuvânt întreg!

Exemplu

[class*="te"] {
    background: yellow;
}
Încearcă - l singur »

Formulare Styling

Selectoarele de atribut pot fi utile pentru formulare styling fără class sau ID :

Exemplu

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

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}
Încearcă - l singur »

Sfat: Accesați Forme CSS Tutorial pentru mai multe exemple privind modul de formulare cu stil CSS.

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6»

Mai multe exemple de CSS Căutători

Utilizați nostru CSS Selector Tester pentru a demonstra diferite selectorii.

Pentru o referință completă a tuturor selectorii CSS, vă rugăm să accesați pagina CSS Căutători de referință .


❮ precedent Capitolul următor ❯