Oddzielna CSS dla wyboru etykietach wejście

Question

Użyłem etykietę z obu wejść tekstowych:

<label for="Username">Username</label> 
<input id="Username" type="text" value=""> 

i checkbox/radioboxes

<label for="Live">System is Live</label> 
<input id="Live" name="Live" type="checkbox" value="false"> 

Kłopot mam się jak mogę określić inny css dla etykiet dla różnych typów danych wejściowych.

Jeśli zrobię rodzajowy etykiety CSS:

label { 
    color: #00a8c3; 
    line-height: 20px; 
    padding: 2px; 
    display: block; 
    float: left; 
    width: 160px; 
} 

znajdę ja albo skończyć z aligné wyboru lub źle ustawionych tekstowych.

Answer 1

Można dodać klas do etykiet. Na przykład:

<label for="Username" class="textbox-label">Username</label> 
<input id="Username" type="text" value=""> 

<label for="Live" class="checkbox-label">System is Live</label> 
<input id="Live" name="Live" type="checkbox" value="false"> 

Następnie użyj wartości klasy w CSS:

label.textbox-label { 
/*some styles here*/ 
} 

label.checkbox-label { 
/*some styles here*/ 
} 

Alternatywnie, jeśli miał etykiety po wejściach, można wybrać tak:

input[type="text"] + label { 
    /*some styles here*/ 
} 

input[type="checkbox"] + label { 
    /*some styles here*/ 
} 

Answer 2

Mogłeś napisać selektor css tak:

label[for=Username] 
label[for=Live] 

Można również przyjrzeć się tym wątku:
CSS Selector for selecting an element that comes BEFORE another element?

Answer 3

Ty można napisać selektor css tak działa:

label[for=Username]{ /* ...definitions here.../} 

label[for=Live] {/...definitions here... */ }