Chciałbym kierować wszystkie elementy h1..h6 na stronie. Wiem, że możesz to zrobić w ten sposób ...CSS Docelowe wszystkie h tagi
h1, h2, h3, h4, h5, h6 {
font-size: 1.2em;
}
Czy można to osiągnąć za pomocą CSS3 lub CSS4? Na przykład:
[att^=h] {
font-size: 1.2em;
}
Jeśli nie jest to możliwe z CSS3 lub 4, jakie są alternatywne rozwiązania?
Nie, w tym przypadku potrzebna jest lista oddzielona przecinkami.
Dzięki chłopaki, wygląda na to, że niestety nie ma łatwego skrótu. Myślę, że będę trzymać się listy rozdzielonej przecinkami. Zastanawiałam się tylko, czy brakuje mi czegoś oczywistego ... – SparrwHawk
Bycie tak rzeczowym robi niewiele, by pobudzić wyobraźnię i pobudzić kreatywność. –
To nie jest podstawowy css, ale jeśli używasz mniej (http://lesscss.org), można to zrobić za pomocą rekurencji:
.hClass (@index) when (@index > 0) {
[email protected]{index} {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
.hClass(@index - 1);
}
.hClass(6);
Sass (http://sass-lang.com) pozwoli Ci zarządzać, ale nie pozwoli rekursja; mają @for składnię tych przypadkach:
@for $index from 1 through 6 {
h#{$index}{
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
}
Jeśli nie używasz dynamicznego języka, który kompiluje do CSS jak less czy Sass, powinno się sprawdzić jeden z tych opcji. Mogą naprawdę uprościć i uczynić bardziej dynamicznym twój rozwój CSS.
+1 za mniej. mniej jest bardzo potężny – Vnge
Byłoby wspaniale, że style są również parametrem, więc można go używać do innych niż czcionka: D –
Jestem prawie pewien ręcznie wpisując niż tworzenie pętli w CSS jak h1, h2, h3 ... zajmuje mniej czasu, miejsca .. bardziej zrozumiałe teraz i później. –
Jeśli używasz Sass można również użyć tego mixin:
@mixin headings {
h1, h2, h3,
h4, h5, h6 {
@content;
}
}
Używaj go tak:
@include headings {
font: 32px/42px trajan-pro-1, trajan-pro-2;
}
Edycja: mój ulubiony sposób to zrobić przez opcjonalne rozszerzenie selektora symboli zastępczych na każdym z elementów nagłówka.
h1, h2, h3,
h4, h5, h6 {
@extend %headings !optional;
}
Wtedy mogę kierować wszystkie nagłówki jak bym kierować każdą pojedynczą klasę, na przykład:
.element > %headings {
color: red;
}
Teraz chciałbym wybrać dla tego projektu SASS: P – Bill
To bardzo mały krok od SCSS do SCSS + Compass: http://compass-style.org/reference/compass/helpers/selectors/ - headings ($ from, $ to) – Imperative
Wow, natknąłem się na to dwa lata później .. a edycja wygląda na złotą! Na pewno rozumiem cel użycia flagi '! Opcjonalne' na przedłużeniu? I nie można znaleźć niczego w Google ... – Bill
SCSS + Kompas sprawia, że ten trzask, ponieważ mówimy o wstępnych przetwórców.
#{headings(1,5)} {
//definitions
}
for n in 1..6
h{n}
font: 32px/42px trajan-pro-1,trajan-pro-2;
Aby rozwiązać ten z wanilii CSS poszukaj wzorów w przodkowie h1..h6 elementów:
<section class="row">
<header>
<h1>AMD RX Series</h1>
<small>These come in different brands and types</small>
</header>
</header>
<div class="row">
<h3>Sapphire RX460 OC 2/4GB</h3>
<small>Available in 2GB and 4GB models</small>
</div>
Jeśli może wykryć wzór s może być w stanie napisać selektor, który celuje w to, co chcesz.Biorąc pod uwagę powyższy przykład wszystkie h1..h6 elementy mogą być kierowane przez łączenie pseudoklas :first-child i :not z CSS3, dostępne we wszystkich nowoczesnych przeglądarkach, jak tak:
.row :first-child:not(header) { /* ... */ }
W przyszłości zaawansowanych pseudo-klasy selektorów jak :has() i subsequent-sibling combinators (~), zapewni jeszcze większą kontrolę, ponieważ standardy sieciowe będą nadal ewoluować w miarę upływu czasu.
+1 Też bardzo bym chciał. Dokładnie tak samo, gdy próbujesz wybrać tylko wejście [type = text], kończysz na długiej liście danych wejściowych [type = email], itd. –
Staje się to coraz bardziej uciążliwe przy wyborze 'h1 a: hover, h2 a: hover, h3 a: hover, h4 a: hover, ... ' – Vortico