Javascript 如何区分a'&书信电报；李>'；（无类别/id）从a'&书信电报；li类=”；hasClass“&燃气轮机'；？

我正在处理一个有序列表，顶级的

没有类。但是，任何缩进的

都有一类

.ql缩进-[indent level]

，缩进级别从1开始，增加1

例如，如果DOM如下所示：

<ol>
  <li>This is a top-level list item</li>
  <li>This is another top-level list item</li>
  <li class="ql-indent-1">this list item has a class</li>
  <li class="ql-indent-1">this list item has a class</li>
</ol>

---

您可以使用

[class]

：

li{背景：浅灰色；}/*默认li样式*/
li.no-indent{background:lightblue；}/*特定的li样式*/
li.ql-indent-1{左边距：20px；}/*特定缩进li样式*/
li.ql-indent-2{左边距：40px；}
li[class*=“ql缩进-”]{/*所有“缩进”列表项样式*/
背景：浅绿色；
}

这是一个顶级列表项
这是另一个具有类但无缩进的顶级列表项
此列表项具有类
此列表项具有类

您可以使用

[class]

：

li{背景：浅灰色；}/*默认li样式*/
li.no-indent{background:lightblue；}/*特定的li样式*/
li.ql-indent-1{左边距：20px；}/*特定缩进li样式*/
li.ql-indent-2{左边距：40px；}
li[class*=“ql缩进-”]{/*所有“缩进”列表项样式*/
背景：浅绿色；
}

这是一个顶级列表项
这是另一个具有类但无缩进的顶级列表项
此列表项具有类
此列表项具有类

令人惊讶的是，这一款有效：

li{
颜色：红色；
}
李：不是（[课堂]）{
颜色：绿色；
}
li.ql-indent-1{
颜色：蓝色；
}

这是一个顶级列表项
这是另一个顶级列表项
此列表项具有类
此列表项具有类

令人惊讶的是，这一款有效：

li{
颜色：红色；
}
李：不是（[课堂]）{
颜色：绿色；
}
li.ql-indent-1{
颜色：蓝色；
}

这是一个顶级列表项
这是另一个顶级列表项
此列表项具有类
此列表项具有类

看看

：not（）

伪类

例如：

.ql编辑器li:not（.ql-indent-1）

-：not（）CSS | MDN您的缩进错误。结构应该是

ol>li>ul>li

@UncaughtTypeError:那

.ql-indent-2

呢？@dfsq:就是这样。@Cerberus

.ql编辑器li:not（[class*=“ql indent-”]）

看看

：not（）

伪类

例如：

.ql编辑器li:not（.ql-indent-1）

-/not（）CSS | MDN您的缩进错误。结构应该是

ol>li>ul>li

@UncaughtTypeError:@evolutionxbox:OP想要区分

.ql indent-

元素和那些没有

的元素。ql indent-

@evolutionxbox:@Cerbus是正确的，我需要区分没有类的

元素和有类的元素。你说得对，我需要使用

[class]

属性，但我需要将它与

:not（）

伪类一起使用。@evolutionxbox:OP想要区分

.ql indent-

元素和那些没有

的元素。ql indent-

@evolutionxbox:@Cerbus是正确的，我需要区分没有类的

和有类的。您是对的，我需要使用

[class]

属性，但我需要将其与

:not（）

伪类一起使用。如果

li

元素中的一个从其他元素获得css类，该怎么办？例如，其他一些设置悬停状态的库？仅选择

[class]

是相当脆弱的。坦率地说，考虑到实际的问题标题，这个答案会被认为更具体。如果

li

元素中的一个从其他元素获得css类会怎么样？例如，其他一些设置悬停状态的库？只有选择

[class]

是相当脆弱的。坦白说，考虑到实际问题的标题，这个答案会被认为更具体。

.ql-editor li:nth-child(n+100):before { // should only work on classless <li>'s
  margin-right: 0.9em;
}

.ql-editor li:nth-child(n+1000):before { // should only work on classless <li>'s
  margin-right: 1.5em;
}

.ql-editor li.ql-indent-1:nth-child(n+703):before { // should only work on the .ql-indent-# <li>'s
  margin-right: 0.9em;
}