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

Question

我有一个嵌套的无序列表，其中包含一个＆＃34; li＆＃34;使用标识符定义的元素：[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]) - 选择所有li除了main，但我需要相反的东西

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

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

Answer 1

您没有意识到，JSFiddle演示中的[data-main]选择器仅选择顶级li元素。您在此处遇到的问题是此li元素包含其他li元素。这些选择器不会单独选择它们，但它们包含在所选的元素中：

如果您只想设置[data-main]元素中的文字，而其中包含的ul元素中的不，则需要覆盖{{ 1}}样式声明：

[data-main]

[data-main] {
  color: red;
}

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

如果你想在“1（必须被选中）”文本周围放置一个边框而不是其它内容，你可以将该文本包装在<ul> <li data-main>1 (must be selected) <ul> <li>1.1</li> <li>1.2</li> </ul> </li> <li>2</li> </ul>元素中并改为使用样式：

span

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