selektor CSS dla wielu podelementów

Question

Powiedzmy mam poniższej tabeli:

<table class="live_grid"> 
    <tr> 
     <td> 
      <h3>Something!</h3> 
     </td> 
    </tr> 
</table> 

Jeśli chcę styl z <h3> w tabeli, mogę użyć tego selektor CSS:

.live_grid h3 { 

} 

ten działa w porządku. Pojawi się problem, jeśli chcę nadać wszystkim nagłówkom styl. Próbowałem to:

.live_grid h1,h2,h3,h4,h5,h6 { 

} 

Wydaje się dopasować pozycje, które nie sąw moim stole z klasy live_grid.

Jestem pewien, że jest to prosty problem i tuż przede mną. Czy możesz wskazać, co robię źle?

Answer 1

Standard Opcja:

Jeśli chcesz projektować wszystkie nagłówki w tej klasie, trzeba zrobić to w ten sposób (co może być również wykonane bez podział linii). Zauważ, każdy selektor ma .live_grid w nim:

.live_grid h1, 
.live_grid h2, 
.live_grid h3, 
.live_grid h4, 
.live_grid h5, 
.live_grid h6 { 
    /* style here */ 
} 

Kiedy przecinek oddzielić rzeczy, są one niezależne od siebie - stąd konieczność ponownie odwołać klasę.

Na przykład:

#myDiv1, .live_grid, #myDiv2 { 
    color: blue; 
} 

Byłoby to ustawić text-kolor wszystkiego w elemencie #myDiv1, wszystko w elemencie #myDiv2, a wszystko w elemencie .live_grid do konieczności niebieski kolor tekstu.

To również wyjaśnia, dlaczego Twój CSS pasuje do wszystkich nagłówków - odwołujesz się do nich osobno, oddzielając je przecinkami - nie ma selektora dla ich elementów zawierających.

---

CSS opcja pre-processor

Albo, zawsze można iść z czymś LESS lub SASS który pozwala pisać zagnieżdżonych zasadami coś takiego:

#live_grid { 
    h1, h2, h3, h4, h5, h6 { 
     /* style here */ 
    } 
} 

---

klienta klasa opcja

Wreszcie można dodać klasę do wszystkich nagłówków i po prostu odnosi się do tej klasy:

<-- HTML --> 
<h1 class="custom-header">Title of Blog Post</h1> 
<h2 class="custom-header">Subtitle of Blog Post about Pizza</h2> 

/* CSS */ 
.custom-header { 
    /* style here */ 
} 

Answer 2

.live_grid h1, 
.live_grid h2, 
... 

masz pomysł

Answer 3

Spróbuj tego:

.live_grid h1, 
.live_grid h2, 
.live_grid h3, 
.live_grid h4, 
.live_grid h5, 
.live_grid h6 {} 

Answer 4

Niestety, Będziesz musiał skierować każdą pozycję osobno lub po prostu przypisać do niej klasę.

.live_grid h1, 
.live_grid h2, 
.live_grid h3, 
.live_grid h4, 
.live_grid h5, 
.live_grid h6 { 
} 

Chciałbym po prostu przypisać klasę do pozycji, lub wybiórczo, o których nagłówki rzeczywiście chcesz docelowe.

Answer 5

każdy tag nagłówek musi być kwalifikowane:

.live_grid h1, .live_grid h2, .live_grid h3, .live_grid h4, .live_grid h5, .live_grid h6 

Answer 6

Kod

.live_grid h1,h2,h3,h4,h5,h6 {} 

wybierze tylko h1, który jest ze w .live_grid. Użyj

.live_grid h1,.live_grid h2,.live_grid h3,.live_grid h4,.live_grid h5,.live_grid h6 {} 

Od Adam Roberts' „Selector Grouping”:

Możemy myśleć o przecinkiem jako logiczną OR operatora, ale ważne jest, aby pamiętać, że każdy selektor w grupie jest autonomiczny. pomyłka wspólnej początkujących jest napisać grupy tak:

#foo td, th { 
⋮ declarations 
} 

Początkujący mogą pomyśleć, że powyższy blok deklaracja zostanie zastosowany do wszystkich td i th elementów, które są potomkami elementu o identyfikatorze "bla". Jednak grupa selektor powyżej jest faktycznie równoważne to:

#foo td { 
⋮ declarations 
} 
th { 
⋮ declarations 
} 

Aby osiągnąć prawdziwy cel, napisać grupę sterującą następująco:

#foo td, #foo th { 
⋮ declarations 
} 

Answer 7

To jedna z tych rzeczy, który jest do bani o CSS.Jeśli chcesz CSS ssać mniej można użyć http://sass-lang.com/ i będzie wyglądać następująco:

.live_grid { 
    h1, h2, h3, h4, h5, h6 { 
    /* styles here */ 
    } 
} 

Answer 8

.live_grid h1, 
.live_grid h2, 
. 
. 
. 

.live_grid h6 { //now add your style here } 

Answer 9

Innym rozwiązaniem mogłoby być dodanie specjalnej klasy dla każdego h elementu, który chcesz do znaczników HTML, a następnie, w swoim CSS możesz napisać coś takiego: