Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
До сих пор мы видели, как мы можем нацеливать элементы на основе их атрибутов и состояний. CSS3 также позволяет нам ориентироваться на элементы, основываясь только на их расположении в разметке. Эти селекторы сгруппированы под заголовком структурные псевдоклассы.
Они могут показаться сложными прямо сейчас, но они будут иметь больше смысла, когда мы рассмотрим способы их применения позже. Эти селекторы поддерживаются в IE9 и новее, а также в текущих и старых версиях всех других браузеров, но не в IE8 и ниже:
:root
Корневой элемент, который является элементом html
E:nth-child(n)
Элемент En Параметр n
E:nth-last-child(n)
Элемент FnE li:nth-last-child(1)li:last-child
(см. примечание ниже).
E:nth-of-type(n)
Элемент, который является n:nth-child:nth-of-type
E:nth-last-of-type(n)
Как nth-of-type(n)
Примечание: параметры структурных селекторов
Существуют четыре псевдокласса, которые принимают в качестве параметра в скобках уравнение an+boddeven Структурные псевдоклассы включают в себя :nth-child(an + b):nth-last-child(an + b):nth-of-type(an + b):nth-last-of-type(an + b) В уравнении an+babnn
В простейшем случае вы можете передать целое число. Например, E:nth-of-type(3)E Вы можете передать одно из двух ключевых слов oddeven Вы также можете, более мощно, передать
числовое выражение, например, E:nth-of-type(3n+1) 3n+1 Смещение по умолчанию равно нулю, поэтому, где :nth-of-type(3n):nth-of-type(3n+1
Отрицательные смещения также допускаются. CSS основан на лингвистических языках, а не на языках программирования, поэтому счет начинается с 10 Между множителем an
С помощью этих числовых псевдоклассов вы можете точно определить, на какие элементы вы хотите ориентироваться, не добавляя классы в разметку. Наиболее распространенным примером является таблица, в которой все остальные строки имеют более темный цвет, чтобы их было легче читать. Мы привыкли добавлять нечетные или четные классы к каждому tr Теперь мы можем просто объявить tr:nth-of-type(odd) Вы даже можете сделать шаг вперед с помощью трехцветных полосатых таблиц: target tr:nth-of-type(3n)tr:nth-of-type(3n+1)tr:nth-of-type(3n+2)
E:first-child
Элемент EE Это то же самое, что E:nth-child(1)
E:last-child
Элемент EEE:nth-last-child(1)
:first-of-type
Так же, как :nth-of-type(1)
E:last-of-type
Так же, как :nth-last-of-type(1)
E:only-child
Элемент EE
E:only-of-type
Элемент EEE
Примечание: ребенок против типа
При использовании структурных селекторов nth-of-typenth-child Дочерний элемент просматривает все дочерние элементы, которые соответствуют количеству, и проверяет, совпадает ли предшественник. Тип сначала просматривает все элементы, которые соответствуют предшественнику, а затем соответствует количеству.
В случае p:nth-child(3n) Если этот ребенок p если нет, то нет совпадения. В случае p:nth-of-type(3n)pp
Структурные псевдоклассы основаны на родительском элементе и возобновляют подсчет для каждого нового родительского элемента. Они смотрят только на элементы, которые являются прямыми потомками родителя. Текстовые узлы не являются частью уравнения.
E:empty
Элемент, который не имеет детей; это включает в себя текстовые узлы, поэтому <p>hello</p><p> </p>p:empty<p></p><p><!-- comment --></p> Этот селектор также соответствует пустым или пустым элементам, таким как <br><input> На уровне селекторов CSS 4 уровня, получите p:blank<p> </p>.
E:lang(en)
Элемент в языке, обозначаемый двухбуквенным сокращением, например en В отличие от E:[lang|=en]langEE:lang(en)E
E:not(exception)
Это особенно полезно: он будет выбирать элементы, которые не соответствуют селектору в скобках.
Селекторы с псевдоклассом :not Сопоставление с левой стороны идет первым. Например, p:not(.copyright)copyright Вы можете связать несколько :not input:not([type=checkbox]):not([type=radio])inputcheckboxradio