Question

我正在尝试删除一些子弹点，并用刻度替换它们。我可以让它工作，但然后我的菜单栏搞砸了。所以我需要在<ul>中添加一个类，所以它不会影响其他任何内容。

我试图添加一个类，但仍然无法正常工作。为什么呢？

工作但弄乱我的菜单栏：Working

HTML：

<ul class="removeBulletAddTick">
    <li class="removeBulletAddTick"> Test text 1</li>
    <li class="removeBulletAddTick">Test text 2</li>
    <li class="removeBulletAddTick">Test text 3</li>
</ul>

CSS：

ul removeBulletAddTick{
  list-style: none;
}

ul li:before {
  content: '✓';
}

更新

当我提出你的建议时，我的菜单栏乱糟糟的：

Screenshot of menubar

Answer 1

事实证明，类选择器未正确声明，它缺少句点（.），应该是.removeBulletAddTick。

下面的代码演示了这一点，您会注意到有问题的类添加到列表项规则中以及更具体的特性 - 这是为了确保这些规则仅适用于您希望它们的列表项;哪些是类.removeBulletAddTick。

ul .removeBulletAddTick {
  list-style: none;
}

ul li.removeBulletAddTick:before {
  content: '✓';
}

Updated JSFiddle

您甚至不需要在每个列表项上声明该类。最好在包含的父元素上声明它，如下所示：

ul.removeBulletAddTick {
  list-style: none;
}

ul.removeBulletAddTick li:before {
  content: '✓';
}

代码段示范：

ul.removeBulletAddTick {
  list-style: none;
}

ul.removeBulletAddTick li:before {
  content: '✓';
}

<ul class="removeBulletAddTick">
    <li>Test text 1</li>
    <li>Test text 2</li>
    <li>Test text 3</li>
</ul>

删除子弹添加勾选不起作用

1 个答案: