CSS选择器之间的星号（*）的含义

Question

我的问题是关于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的子代”。 / p>