css - использовать универсальный селектор '*' против HTML или селектора тела?

11

Применение стилей к тегу body будет применено ко всей странице, поэтому

body { font-family: Verdana }

будет применяться ко всей странице. Это также может быть сделано с

* {font-family: Verdana} 

который будет применяться ко всем элементам и, следовательно, будет иметь тот же эффект.

Я понимаю принцип, что в первом случае стиль применяется к одному тегу, тексту для всей страницы, тогда как во втором примере шрифт применяется к каждому отдельному элементу HTML. Я спрашиваю, какова практическая разница в этом, каковы последствия и какова причина, ситуация или наилучшая практика, которая приводит к использованию одного над другим.

Одним из побочных эффектов, безусловно, является скорость (+1 Роб). Меня больше всего интересует фактическая причина выбора одного из других с точки зрения функциональности.

Майкл Даррант
источник
возможный межсайтовый дубликат: stackoverflow.com/questions/7187569/…
Ciro Santilli 法轮功 病毒 审查 六四 事件 法轮功

Ответы:

6

Функциональные различия между этими двумя вариантами выбора CSS ... (мое мнение)

тело

  • Применяет свойства стиля к элементу тела.
  • Элементы внутри тела могут наследовать значения свойств. Некоторые свойства по умолчанию «наследуют».
  • Объявления стиля, которые соответствуют элементу в теле, могут переопределить унаследованный стиль.

Универсальный селектор * (все элементы)

  • Применяет свойства стиля ко всем отдельным элементам.
  • Заменяет унаследованные свойства стиля и «начальные значения» по умолчанию. Блокирует наследование.
  • Другие, более конкретные селекторы CSS, которые соответствуют элементу, заменят свойства стиля, примененные *.

Предложения

  1. Используйте тело для свойств стиля, которые по умолчанию наследуются, таких как шрифт, цвет, чтобы обеспечить разумное значение по умолчанию для элементов, уменьшая необходимость явного кода для каждого случая и сохраняя возможность для элементов, содержащихся на более низких уровнях ниже тела, наследовать от своих родителей.
  2. Вероятно, лучше не использовать Universal Selector * в этом случае. Он прерывает наследование между другими элементами внутри тела и может вынудить вас написать больше правил CSS для компенсации. Это может быть причиной замедления рендеринга страниц. Это зависит от размера и содержания страницы, а также от количества правил CSS.
joshp
источник
10

Попробуйте что-то вроде этого

body { font-family: Verdana }
table { font-family: Arial }

против

* { font-family: Verdana }
table { font-family: Arial }

И посмотрите, какие стили применяются к ячейкам таблицы.

Существует различие между «применяется ко всему документу» и «применяется к каждому элементу документа», когда вы имеете дело с каскадными таблицами стилей.

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

Однако есть некоторые стили, которые не каскадируются, такие как margin и padding (обычно там, где это не имеет смысла). Они могут быть применены только к определенным тегам, и здесь подстановочный знак может оказаться полезным (хотя и редко).

Большинство не каскадных стилей также имеют значение наследования (например, margin: inherit), что означает «принять значения родительского тега».

прецизионный самописец
источник
+1 Спасибо. Разница только в таблицах? Я хотел бы принять ответ, который является более определенным или описательным в отношении того, какие другие элементы обрабатываются по-разному, как видно из таблиц. Дополнительные причины или ситуации, приводящие к тому или иному, тоже были бы хорошими.
Майкл Даррант
@MichaelDurrant: Нет, это в равной степени относится к промежутку внутри div. Однако следует отметить, что некоторые стили, такие как margin и padding, не каскадируются к дочерним элементам. Для них вы должны использовать *, чтобы относиться ко всему, но вы редко хотите это делать.
фунтовые
3

Я забыл все подробности, но с помощью селектора * производительность снижается, поскольку каждый элемент оценивается, когда браузер анализирует CSS и применяет стиль. iirc, устанавливая шрифт, в данном случае, просто для родителя, делает одну ссылку для каждого элемента, и дополнительная работа не требуется.

Есть и другие проблемы, но, опять же, я не помню их все и не использовал * в течение многих лет.

обкрадывать
источник
1

Общее руководство для хорошего дизайна CSS должно быть как можно более конкретным, но не более.

Итак, в вашем примере применение стиля к элементу body будет как можно более конкретным и определенно более конкретным, чем селектор '*'.

Dibbeke
источник
1

Как уже упоминалось, body { font-family: Verdana }будет выбрать шрифт Verdena только те элементы , которые наследуют в font-styleсобственность от своих родителей, что все его родителей тоже наследуют свойство eventualy образуют bodyэлемент, и * {font-family: Verdana}будет выбирать шрифт Verdena для всех элементов. Я хотел бы проиллюстрировать разницу на примере:

Используя селектор тела:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Используя универсальный селектор *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

Используйте коды css и html примеров, которые вы поймете, что <input>элемент вообще не наследует стиль шрифта и, следовательно, все, что вы вводите в форму, получает стиль шрифта по умолчанию для таблицы стилей агента пользователя. Во втором примере универсальный селектор *явно устанавливает стиль шрифта для каждого элемента, включая inputэлемент.

user106313
источник