CSS选择器:没有任何子元素的元素

Question

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

• 1(必须选择)
  • 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

你没有意识到的是[data-main]JSFiddle演示中的选择器只选择那个顶级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>