html - 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>

请考虑我的问题是关于两个元素之间的星号，当用作 选择器 * 时它的行为是不同的。谁能解释这是怎么发生的？提前致谢。

最佳答案

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

它与 descendant combinator 一起应用.

因此 ul * li 表示“li 是任何元素的后代，而该元素是 ul 的后代”。或者，换句话说，“li 是 ul 的后代，但不是 ul 的子代，ul 选择器的一部分匹配。

关于html - css选择器之间星号(*)的含义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52094687/