Question

我正在使用有序列表，而顶级<li>没有上课。但是，任何缩进<li>的{{1}}类都会.ql-indent-[indent-level]，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>

然后结果就像这样（忽略编号）：

这是顶级列表项
这是另一个顶级列表项
1. 此列表项有一个类
2. 此列表项有一个类

我如何区分这两种不同类型的列表项（没有类和一类的列表项）？最终，我需要更改{{1但是，当我执行以下操作时，无类<li>代码也会应用于<li>元素。如果需要JavaScript，那么解决方案必须是vanilla JS，而不是jQuery。

.ql-indent-[indent-level]

Answer 1

您可以使用[class] attribute selector：

li           { background: lightgray; } /* Default li style */
li.no-indent { background: lightblue; } /* Specific li style */
li.ql-indent-1 { margin-left: 20px; }   /* Specific indent li style */
li.ql-indent-2 { margin-left: 40px; }

li[class*="ql-indent-"] {               /* All "indent" list items style */
  background: lightgreen;
}

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

这将选择具有<li>属性的所有 class元素，其中包含ql-indent-。

li[class]会选择拥有 li属性的所有class元素。
*="ql-indent-"部分说：
只选择属性值包含（*="....."）ql-indent-的那些。

Answer 2

令人惊讶的是这个有效：

＆＃13;

li {
  color:red;
}
li:not([class]){
  color:green;
}
li.ql-indent-1 {
color:blue;
}

＆＃13;

<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-2">this list item has a class</li>
</ol>

＆＃13;

但当然应该缺少整个class属性。

如何区分＆＃39; <li>＆＃39; （没有课程/身份证）来自＆＃39; </li> <li class =“hasClass”>＆＃39;？

2 个答案: