html - CSS 选择器 : element without any its children

Question

我有一个嵌套的无序列表，其中一个“li”元素用标识符定义:[data-main]

• 1 (must be selected)
  • 1.1
  • 1.2
• 2

使用以下 html:

<ul>
  <li data-main>1 (must be selected)
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ul>

我正在尝试找到正确的 CSS 选择器，以仅选择没有其子元素的元素 1:1.1 和 1.2。选择器，我试过:

li:not([data-main]) - 选择除 main 之外的所有 li，但我需要相反的东西

[data-main]:not(:nth-child(1)) - 不选择任何内容

https://jsfiddle.net/DaViking/dtqhag2t/

Answer 1

您没有意识到的是，您的 JSFiddle 演示中的 [data-main] 选择器 仅选择顶级 li 元素。您在这里面临的问题是此 li 元素 包含 其他 li 元素。这些不是由该选择器单独选择的，但它们包含在被选择的元素中:

如果您只想为 [data-main] 元素中的文本设置样式，但不包含在其中的 ul 元素中，您需要覆盖 [data-main] 样式声明:

[data-main] {
  color: red;
}

[data-main] ul {
  color: initial;
}

<ul>
  <li data-main>1 (must be selected)
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ul>

如果您只想在“1(必须选择)”文本周围放置一个边框，您可以将该文本包装在一个 span 元素中，然后对其应用样式:

[data-main] span {
  border: 1px solid red;
}

<ul>
  <li data-main>
    <span>1 (must be selected)</span>
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ul>