Chciałbym kierować reklamy na wszystkie tagi h na stronie. Wiem, że możesz to zrobić w ten sposób ...
h1,
h2,
h3,
h4,
h5,
h6 {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
ale czy istnieje skuteczniejszy sposób na zrobienie tego za pomocą zaawansowanych selektorów CSS? np. coś takiego:
[att^=h] {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
(ale oczywiście to nie działa)
css
css-selectors
SparrwHawk
źródło
źródło
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, ...
Odpowiedzi:
Nie, w tym przypadku potrzebujesz listy oddzielonej przecinkami.
źródło
h1, h2, h3 {}
.To nie jest podstawowy css, ale jeśli używasz LESS ( http://lesscss.org ), możesz to zrobić za pomocą rekurencji:
Sass ( http://sass-lang.com ) pozwoli ci to zarządzać, ale nie pozwoli na rekursję; mają
@for
składnię dla tych instancji:Jeśli nie używasz dynamicznego języka, który kompiluje się do CSS, takiego jak LESS lub Sass, zdecydowanie powinieneś sprawdzić jedną z tych opcji. Mogą naprawdę uprościć i zdynamizować rozwój CSS.
źródło
"can" != "should"
. Mimo to opcje Sass / LESS zapewniają rozszerzalność, której nie ma w przypadku standardowego CSS. Pomyśl o czymś takimfont-size: (48px / @index)
.scss/sass
w swoim projekcie, ale chcą generować za jegocss
pomocąscss/sass
, mogą skorzystać z narzędzia online o nazwie sassmeisterJeśli używasz SASS, możesz również użyć tej mieszanki:
Użyj go w ten sposób:
Edycja: Mój ulubiony sposób na zrobienie tego poprzez opcjonalne rozszerzenie selektora zastępczego na każdy z elementów nagłówka.
Następnie mogę kierować reklamy na wszystkie nagłówki, tak jak w przypadku dowolnej pojedynczej klasy, na przykład:
źródło
!optional
flagi? I nie mogę znaleźć niczego w google ...SCSS + Compass sprawia, że jest to bardzo proste, ponieważ mówimy o preprocesorach.
Możesz dowiedzieć się o wszystkich selektorach pomocniczych Compass tutaj :
źródło
Stylus jest interpolacja selektor
źródło
Selektor jQuery dla wszystkich znaczników h (h1, h2 itd.) To „: header”. Na przykład, jeśli chcesz, aby wszystkie znaczniki h miały kolor czerwony za pomocą jQuery, użyj:
źródło
$('.my_div :header').css("color","red")
?Aby poradzić sobie z tym za pomocą waniliowego CSS, poszukaj wzorów u przodków
h1..h6
elementów:Jeśli potrafisz dostrzec wzorce, możesz 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 połączenie:first-child
i:not
pseudoklasy z CSS3, dostępne we wszystkich nowoczesnych przeglądarkach, na przykład:W przyszłości zaawansowane selektory pseudoklas, takie jak
:has()
i kolejne kombinatory rodzeństwa (~
), zapewnią jeszcze większą kontrolę, ponieważ standardy sieciowe będą ewoluować w czasie.źródło
Możesz także użyć PostCSS i wtyczki niestandardowych selektorów
Wynik:
źródło
Możesz .klasować wszystkie nagłówki w swoim dokumencie, jeśli chcesz kierować na nie jednym selektorem, w następujący sposób:
oraz w css
Nie twierdzę, że jest to zawsze najlepsza praktyka, ale może być przydatna, a do kierowania składni - na wiele sposobów łatwiejsza,
więc jeśli dasz wszystkim h1 do h6 tę samą klasę .heading w html, możesz je zmodyfikować dla dowolnych dokumentów html, które używają tego arkusza css.
plus, bardziej globalna kontrola w porównaniu z „sekcją div artykuł h1 itp. {}”,
minusem, zamiast wywoływać wszystkie selektory na miejscu w css, będziesz miał dużo więcej pisania w html, ale uważam, że posiadanie klasy w html do kierowania na wszystkie nagłówki może być korzystne, po prostu uważaj na pierwszeństwo w css, ponieważ konflikty mogą wynikać z
źródło
Nowa
:is()
pseudoklasa CSS może to zrobić w jednym selektorze:źródło