css - використовувати універсальний селектор '*' у порівнянні з html або body Selector?

Застосування стилів до тегу тіла буде застосовано до всієї сторінки, так

body { font-family: Verdana }

буде застосовано до всієї сторінки. Це також можна зробити

* {font-family: Verdana} 

який би застосовувався до всіх елементів, і тому, здавалося б, матиме однаковий ефект.

Я розумію принцип, що в першому випадку стиль застосовується до одного тегу, корпусу для всієї сторінки, тоді як у другому прикладі шрифт застосовується до кожного окремого елемента html. Я запитую, в чому полягає практична відмінність цього, які наслідки і яка причина, ситуація чи найкраща практика, що призводить до використання одного над іншим.

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

Функціональні відмінності між цими двома варіантами селектора CSS ... (мій прийом)

тіло

• Застосовує властивості стилю до елемента тіла.
• Елементи всередині тіла можуть успадковувати значення властивостей. Деякі властивості за замовчуванням "спадкувати".
• Декларації стилів, які відповідають елементу в тілі, можуть змінити спадковий стиль.

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

• Застосовує властивості стилю до всіх окремих елементів.
• Замінює успадковані властивості стилю та "початкові значення" за замовчуванням. Блокує спадщину.
• Інші, більш конкретні селектори css, які відповідають елементу, замінять властивості стилю, застосовані *.

Пропозиції

1. Використовуйте тіло для властивостей стилю, які за замовчуванням успадковуються, наприклад, шрифту, кольору, щоб забезпечити розумне значення за замовчуванням для елементів, зменшуючи необхідність явного коду для кожного випадку та зберігаючи можливість елементів, що містяться на нижчих рівнях нижче тіла, до успадковувати від батьків.
2. Напевно, краще не використовувати в цьому випадку Universal Selector *. Це перериває спадкування між іншими елементами в тілі, і може змусити вас написати більше правил css для компенсації. Це може стати фактором уповільнення візуалізації сторінок. Це залежить від розміру та вмісту сторінки та кількості правил css.

Спробуйте щось подібне

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

проти

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

І подивіться, які стилі застосовані до комірок таблиці.

Існує різниця між "застосованим до всього документа" та "застосованим до кожного елемента документа", коли ви маєте справу з каскадними таблицями стилів.

Застосування каскадного стилю до тіла застосовує його до всіх тегів у тілі, поки тег не замінить його. Тоді переписаний стиль застосовується до всіх тегів у межах цього.

Однак є деякі стилі, які не каскадують, такі як маржа та накладка (зазвичай там, де цього немає сенсу). Вони можуть бути застосовані лише до конкретних тегів, і саме там підказки можуть бути корисними (хоча і рідко).

Більшість некаскадних стилів також мають значення успадкованого (напр. margin: inherit), Що означає "прийняти значення батьківського тегу".

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

Є й інші проблеми, але, знову ж таки, я не згадую їх усіх і не використовував * у роках.

Загальне керівництво для хорошого дизайну CSS - бути максимально конкретним, але не більше.

Отже, у вашому прикладі застосування стилю до елемента тіла було б максимально конкретним та, безумовно, більш конкретним, ніж селектор '*'.

Як уже згадувалося, 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елемент.