css选择器之间的星号（*）的含义[重复]

Question

这个问题在这里已有答案：

• What does an Asterisk (*) do in a CSS selector? 5个答案

我的问题是关于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 *时它的行为是不同的。任何人都可以解释这是怎么发生的？提前致谢。

Answer 1

*是universal selector。它匹配任何元素。

它与descendant combinator一起使用。

所以ul * li的意思是“一个li，它是任何元素的后代，是ul的后代”。或者，换句话说，“li是ul的后代，但不是ul的孩子，选择器的ul部分匹配”。