Я изучаю специфику селекторов CSS и нахожусь в следующих примерах. Я не мог понять, какой селектор CSS имеет более высокую специфичность по другому?Какое из перечисленных ниже имеет более высокую специфичность в CSS?
1. Пример:
p#largetext
body p#largetex
2. Пример:
p.largetext ul li
p ul li a
Как специфика CSS работает друг над другом? Почему один выше, а один ниже?
Ваш вопрос отвечает на CSS3 selectors, W3C Recommendation:
9. Вычисление специфичности селектора
Специфичность селектора вычисляется как следует:
- подсчитать количество ID селекторов в селекторе (= а)
- подсчитать число классов селекторов, атрибуты селекторов и псевдо-классов в селекторе (= б)
- подсчитать количество селекторов типа и псевдо- элементы в селекторе (= C)
- игнорировать универсальный селектор
селекторов внутри отрицание псевдо-класса подсчитывают как и любые другие, но само отрицание не считается псевдо-классом.
Сочетание трех чисел a-b-c (в числовой системе с большой базой ) дает специфику.
С вашими примерами мы имеем:
1)p#largetext имеет специфичность 1,0,1 (1 ид, 1 тип)
body p#largetex имеет специфичность 1,0, 2 (1 идентификатор, 2 типа)
2)p.largetext ul li имеет специфичность 0,1,3 (1 класса, 3 типа)
p ul li a имеет спецификацию 0,0,4 (4 типа)
Для получения значения специфики вам необходимо объединить 3 числа.Так, например, 1, второй селектор более специфичен 102> 101 и, например, 2, первый селектор более специфичен 13> 4.
В обоих случаях, вторая строка является более высокой специфичностью? –
Нет, для второго примера первый селектор имеет более высокую специфичность 13> 4. –
В первом примере вторая строка будет иметь приоритет над первым, поскольку она более конкретна. Ваш второй пример на самом деле нацелен на два разных элемента, поэтому в зависимости от того, что вы хотели, он будет делать две разные вещи. Если два правила имеют одинаковый приоритет, это будет зависеть от порядка самих правил.
Вы можете просмотреть полную разбивку на MDN: Specificity - CSS | MDN
Специфика - вес, рассчитанный на основе селектора. Ниже приведен список из более конкретных для менее конкретных элементов. !
Если специфика двух селекторов одинакова, применяется правило латтетов.
Мне нравится, как [эта статья] (https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#how-to-measure-specificity) разрушает ее. – chinaowl
[Здесь] (https://specificity.keegan.st/) - калькулятор, который вы можете использовать, чтобы получить разницу в специфике между двумя разными селекторами. Кроме того, [здесь] (http://vanseodesign.com/css/css-specificity-inheritance-cascaade/) - отличный ресурс для изучения того, как специфика вычисляется движком CSS. – War10ck
В вашем первом примере приоритет будет иметь «тело». Я думаю, это потому, что это наиболее точно напечатано. Второй пример - недопустимый HTML. –