无类/ID的顶级ul如何仅定位一级li元素？

之前的方案无法生效，因为我无法为父ul元素添加class或ID。请问：当父ul无ID或类时，能否用CSS仅定位一级li？若不行，该如何实现？

对应的HTML代码如下：

<ul>
<li id="acomment-62" class=" comment-item" data-bp-activity-comment-id="62">
    <div class="bb-activity-more-options-wrap action"></div>
   <ul>
        <li id="acomment-65" class=" comment-item" data-bp-activity-comment-id="65">
            <div class="bb-activity-more-options-wrap action"></div>
            <div class="acomment-meta"></div>
            <div class="acomment-content"></div>
        </li>
    </ul>
</li>

<li id="acomment-63" class=" comment-item" data-bp-activity-comment-id="63">
    <div class="bb-activity-more-options-wrap action"></div>
   <ul>
        <li id="acomment-66" class=" comment-item" data-bp-activity-comment-id="66">
            <div class="bb-activity-more-options-wrap action"></div>
            <div class="acomment-meta"></div>
            <div class="acomment-content"></div>
        </li>
    </ul>
</li>

<li id="acomment-64" class=" comment-item" data-bp-activity-comment-id="64">
    <div class="bb-activity-more-options-wrap action"></div>
   <ul>
        <li id="acomment-67" class=" comment-item" data-bp-activity-comment-id="67">
            <div class="bb-activity-more-options-wrap action"></div>
            <div class="acomment-meta"></div>
            <div class="acomment-content"></div>
        </li>
    </ul>
</li>
</ul>

完全可以用CSS实现仅定位一级li，以下是几种可行的方法：

方法1：利用:not()伪类排除嵌套场景 #

通过选择父元素不是li的ul的直接子li，就能精准定位一级li，不会选中嵌套在li内部的二级及以下li：

:not(li) > ul > li {
  /* 示例样式：给一级li加红色边框 */
  border: 2px solid #ff4444;
}

原理：:not(li)限定了ul的父元素不能是li，确保我们选中的是最外层的ul，它的直接子元素就是一级li。

方法2：结合li的类/属性进一步精准定位 #

如果页面上存在其他非li父元素下的ul，可以结合一级li自带的类或属性缩小范围：

/* 仅选中最外层ul下带.comment-item类的一级li */
:not(li) > ul > li.comment-item {
  background-color: #f5f5f5;
}

/* 或者通过ID前缀筛选 */
:not(li) > ul > li[id^="acomment-"] {
  padding-left: 10px;
}

方法3：用后代选择器排除嵌套li #

另一种思路是先选中所有带.comment-item类的li，再排除掉那些嵌套在li内部的：

li.comment-item:not(li li.comment-item) {
  /* 你的样式 */
  font-weight: bold;
}

备选方案：JavaScript辅助添加类 #

如果遇到极个别浏览器兼容问题（目前:not()已支持所有现代浏览器），可以用JS给一级li手动添加类，后续直接用类选择器即可：

// 找到所有一级li并添加自定义类
document.querySelectorAll(':not(li) > ul > li').forEach(item => {
  item.classList.add('first-level-comment');
});

之后就能用.first-level-comment这个类来写样式，无需再考虑层级问题。

内容的提问来源于stack exchange，提问作者Quint Rahaman