В чем разница между применением CSS к <body>и универсальным селектором (*) - PullRequest
Новая
       2

В чем разница между применением CSS к <body>и универсальным селектором (*)

0 голосов
/ 16 мая 2018

Есть ли разница между применением CSS к тегу body и универсальным селектором (*). Какой сценарий будет иметь приоритет при применении правил специфичности.

Ответы [ 5 ]

0 голосов
/ 16 мая 2018

Как уже отмечали другие * ищет все элементы.Короче говоря, каждый раз, когда вы указываете конкретный тег, тег, естественно, будет нацелен на собственную среду.Однако другая причина заключается в том, что селектор html считается корнем любого документа, а body является его потомком.Так что * {}! == все элементы в html, body {} Поэтому, как вы и спросили, * не равно <body>.Кроме того, еще более интересно то, что :root и html оба нацелены на одну и ту же вещь, за исключением того, что :root имеет более высокий приоритет по сравнению с html аналогом.

См. HTML спецификация Есть только 2 элемента, которые происходят от HTML корня <head> и <body>.См. спецификацию тела

Вот небольшой фрагмент, который поможет визуализировать: 

* {
  background-color: green;
}

body {
  background-color: blue;
}

:root {
  /* i have higher priority over html {} */
  background-color: pink;
}

html {
  background: purple;
}
<p>
  test
</p>
<div>
  test2
</div>
<footer>
  Copyright &copy; 2018
</footer>
0 голосов
/ 16 мая 2018

Давайте рассмотрим этот пример: 

body{ 
  background-color: red;
}
.random-class{
  background-color: green;
}
.second-random-class{
  font-size: 15px;
}

отличается от 

* {
  background-color: red
}
.random-class{
  background-color: green;
}
.second-random-class{
  font-size: 15px;
}

, поскольку селектор * будет применять background-color к EVERY element.

Селектор * с background-color: red приведет к 

body{
  background-color: red;
}
.random-class{
  background-color: green;
}
.second-random-class{
  font-size: 15px;
  background-color: red; // <-- received this from *
}

Обратите внимание, что это НИКОГДА не будет выглядеть так в исходном коде (по крайней мере, если вы неиспользуя SCSS или LESS или аналогичный препроцессор).Вот как определяется иерархия.

0 голосов
/ 16 мая 2018

Селектор (*) используется для всех элементов страницы (заголовок, тело ...). Однако, если вы примените тег body, будут изменены только элементы body.

0 голосов
/ 16 мая 2018

Применение стилей с помощью универсального селектора приведет к применению кода к каждому элементу

Применение стилей к телу влияет только на тело, но другие элементы могут наследовать эти стили

Специфика универсального селектора самая низкая, которую вы можете использовать. Более подробную информацию об этом можно найти в W3C документах

0 голосов
/ 16 мая 2018

тело для тела и (*) для (*)? Икс) Если некоторый код (я надеюсь, что нет) не находится в теле, CSS все еще применяется :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...