Значение звездочек (*) между селекторами CSS
Мой вопрос касается знака звездочки между селекторами css. Кажется, что звездочка может игнорировать селекторы по количеству звездочек между двумя элементами.
Пример 1:
ul * li {
color:red;
}<ul>
<li>Item 1</li>
<li>
<ol>
<li>Sub-item 2</li>
<li>Sub-item 2</li>
<li>
<ul>
<li>Sub-item 3</li>
<li>
<ol>
<li>Sub-item 4</li>
<li>Sub-item 4</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>Пример 2:
ul * * * li {
color:red;
}<ul>
<li>Item 1</li>
<li>
<ol>
<li>Sub-item 2</li>
<li>Sub-item 2</li>
<li>
<ul>
<li>Sub-item 3</li>
<li>
<ol>
<li>Sub-item 4</li>
<li>Sub-item 4</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>Пример 3:
ul * * * * * * * li {
color:red;
}<ul>
<li>Item 1</li>
<li>
<ol>
<li>Sub-item 2</li>
<li>Sub-item 2</li>
<li>
<ul>
<li>Sub-item 3</li>
<li>
<ol>
<li>Sub-item 4</li>
<li>Sub-item 4</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>Пожалуйста, примите во внимание, что мой вопрос касается звездочки между двумя элементами, и ее поведение отличается при использовании в качестве selector *.
Кто-нибудь может объяснить, как это происходит?
Заранее спасибо.
@NisargShah не имеет отношения к этому вопросу. мой вопрос касается * между элементами, а не после элемента, и для выбора всех элементов после этого.
Ответы 1
* - это универсальный селектор. Соответствует любому элементу.
Он применяется вместе с потомок комбинатор.
Итак, ul * li означает «li, который является потомком любого элемента, который является потомком ul». Или, другими словами, «li, который является потомком ul, но не потомком ul, которому соответствует часть ul селектора».
Спасибо за ответ, так что ul * li представляет внучку ul, ul * * * li представляет внучку ul и так далее.
"представляет внука ul" - Нет. Это комбинатор потомков, а не комбинатор потомков. Это мог быть внук, правнук и т. д.
Связанный: stackoverflow.com/questions/4910077/…