Що робить * * CSS-селектор?

97

Нещодавно я натрапив * *в CSS .

Для одного *використання в аркуші стилів CSS Інтернет та переповнення стека заповнені прикладами, але я не впевнений у використанні двох * *символів у CSS.

Я переглянув його, але не зміг знайти будь-якої відповідної інформації про це, оскільки сингл *вибирає всі елементи, але я не впевнений, чому сайт використовував його двічі. Що для цього відсутня, і чому цей хак використовується (якщо це хакер)?

html css css-selectors

— свопнеш
джерело

138

Як і будь-який інший раз, коли ви ставите два селектори один за одним (наприклад li a), ви отримуєте комбінатор нащадків. Так * *само будь-який елемент, який є нащадком будь-якого іншого елемента - іншими словами, будь-який елемент, який не є кореневим елементом усього документа.

— варильні панелі
джерело

THX для відповіді ... це те, про що я думав, але не впевнений, тому думав попросити у спільноти ... прийму це незабаром +1

— swapnesh

1

ще одне, що потрібно запитати - чи дійсно доречно використовувати * *? ніби я розумію концепцію, але не отримую її в практичному розумінні :(

— свопнеш

2

@swapnesh це схоже на злом браузера. Є * { font-size: XXX }правило і * * { font-size: YYY }правило. Один з них стосується більшості браузерів, а другий стосується браузерів із певною помилкою, хоча я не маю терпіння з’ясувати деталі. Це схоже на * htmlхак, який був загальним для виявлення старого IE.

— панно

THX для додавання останнього детального блоку під коментарями ... це майже ідеальний варіант ... не потрібно робити більше мозкових штурмів для цього :) THX багато :)

— swapnesh

10

Зверніть увагу , що в манері * html, * * буде відповідати HTML елемент в IE6.

— Alohci

80

Лише невеликий великий приклад:

Спробуйте додати це на своєму веб-сайті:

* { 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; }

Демо: http://jsfiddle.net/l2aelba/sFSad/

Приклад 2:

Демо: http://jsfiddle.net/l2aelba/sFSad/34/

— l2aelba
джерело

7

Це не суворо відповідь, але яка чудова візуалізація!

— aboy021

1

@ l2aelba справді приємне пояснення :) +1

— свопнеш

33

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

— Фрамбот
джерело

Дякую Джо, протестував його тут, а також згідно з коментарями вище: * *селектор еквівалентний html *для всіх браузерів, крім старого хорошого IE6 :-)

— Стано

@Stano * *еквівалентно html *... для файлу HTML. Але CSS може використовуватися для стилювання інших типів документів (зокрема, SVG).

— Сільвен Леру

11

* означає застосувати задані стилі до всіх елементів.

* *означає застосувати задані стилі до всіх дочірніх елементів елемента. Приклад:

body > * {
  margin: 0;
}

Це стосується стилів маргіналу для всіх дочірніх елементів тіла. Точно так же,

* * {
  margin: 0;
}

відноситься margin: 0до *дочірнім елементам «S. Коротше кажучи, це стосується margin: 0майже кожного елемента.

Взагалі одного *достатньо. Немає потреби у двох * *.

— CrazyFellow
джерело

2

THX для пояснення +1. Хоча навіть я не впевнений у тому, що ви щойно згадали в останньому рядку "Взагалі, * достатньо. Немає потреби в * *. Гадаю."

— свопнеш

3

* *застосовує стилі до нащадкових елементів, а не дочірніх елементів. Дочірні елементи були б >як у вашому прикладі, а не простір. Нащадок і дитина - це не одне і те ж.

— BoltClock

7

Якщо вибирати всі елементи, вкладені всередині іншого елемента, точно так само div aвибиратимуться всі <a>елементи, вкладені десь усередині <div>елемента.

— Майк Брант
джерело