Що робить зірочка (*) у селекторі CSS?

98

Я знайшов цей CSS-код і запустив його, щоб побачити, що він робить, і він окреслив КОЖЕН елемент на сторінці,

Чи може хтось пояснити, що робить зірочка * у CSS?

<style>
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
</style>

css css-selectors

— ДжейсонДейвіс
джерело

@jasondavis - Це питання є специфічним для вашого коду, або я б просто задав нове запитання. Чи відображається на вашій сторінці кілька контурів з різними кольорами? Єдиний спосіб я можу створювати різні кольори, як це, якщо я вкажу тег, то * IE div * { outline ...}і * { outline ... }. Якщо я використовую * { outline ... }і використовується * * { outline ... }лише останній опис css.

— JabberwockyDecompiler

95

Це підстановка, це означає, що вона вибере всі елементи в цій частині DOM.

Наприклад, якщо я хочу застосувати поле до кожного елемента на всій моїй сторінці, ви можете використовувати:

* {
    margin: 10px;
}

Ви також можете використовувати це в рамках підборів, наприклад, наступне додасть поле до всіх елементів тегу абзацу:

p * {
    margin: 10px;
}

У вашому прикладі робиться хитрість css, щоб застосувати послідовні межі та поля до елементів, щоб надати їм декілька кольорових рам. Наприклад, біла облямівка, оточена чорною облямівкою.

— Радянський
джерело

Яка перевага використання p *на відміну від простого використання p?

— Соломон Клоссон

7

Немає «переваги», це лише те, як ви вибираєте всі нащадкові елементи всередині pтегу. Так що якщо у вас був span, b, strong, imgі т.д. всередині вашого пункту, було б вибрати ті , і застосувати стилі до них.

— Радянський

30

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

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

— Том
джерело

2

Хоча в наші дні браузер, вбудований у інспекторів, набагато ефективніший, ні? Або за допомогою firebug.

— Лоуренс Дол

@SoftwareMonkey - Так, сьогодні це правда. Вбудовані інспектори чудові. Наприклад, я використовую Chrome, а Ctrl+Shift+cпотім наведіть курсор на елемент і Chrome забарвлює фон. Набагато швидше, ніж упустити цей стиль зірочок у CSS.

— Том

1

Хоча відповідь Радянського правдива, ця відповідь повинна була бути позначена як правильна відповідь, тому що це точна відповідь на поставлене питання.

— Біллі Самуель

4

* - це підстановка. Це означає, що він застосує стиль до будь-якого елемента HTML. Додаткові * застосуйте стиль до відповідного рівня вкладення.

Цей селектор застосовуватиме різні кольорові контури до всіх елементів сторінки, залежно від рівня вкладеності елементів.

— futureelite7
джерело

4

* діє як масова карта, як і в більшості інших випадків.

Якщо ти зробиш:

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

Тоді всі елементи HTML матимуть ці стилі.

— Майк Трпчич
джерело

0

у вашому таблиці стилів, як правило, потрібно визначити основне правило для всіх елементів, таких як атрибут розміру шрифту та поля. {шрифт: 14px; маржа: 0; padding: 0;} / за замовчуванням браузера за замовчуванням для елементів, весь розмір шрифту тексту відображатиметься як розмір 14 пікселів з нульовим запасом та накладкою, включаючи h1, ... pre. * /

— Мікель Бредлі Бенджамін
джерело