html - 如何避免将类应用于 Div 内的跨度？

Question

是否有可能或最好的做法是避免将类放在嵌套在 span 中的 div 上？

我有一个典型的“待办事项列表”学习元素，我需要在单击该元素时划行，但我也有一个 span 元素，稍后将成为删除整个 li 的删除按钮。

<li><span class="deleteBtn">X</span> Birthday Cake</li>

目前直通线显然也针对跨度，所以我想知道是否有一种简单的方法可以避免它而无需破解，否则我猜我可能需要将文本设为单独的 span并将直通类应用于那些 span 的

Answer 1

Is it possible or the best practice to avoid putting a class on a span which is nested inside a div?

是的，这是可能的。

li > span{
  /* styles */
}

这是最佳实践吗？不必要。我发现在 div 或 span 中包含子类很有帮助。为您提供更大的控制权，即使您不使用它们，对于 future 的开发来说，它可能会让您的生活更轻松。

查看 CSS 选择器 here ，应该让您更好地了解您可以实现什么。关于我上面的示例，li 元素的第一个子元素必须是该样式生效的跨度。无论嵌套数量如何，执行以下操作将适用于 li 元素内的任何范围。

li span {
    /* styles */
}

编辑:看到您的评论后，我认为我的内容仍然有效，但是您应该将内部文本包装在一个元素中，另一个 span 应该这样做。

<li>
  <span class="deleteBtn">X</span>
  <span class="ItemText">Birthday Cake</span>
</li>

这将使您能够按以下方式添加 CSS。

li > .ItemText{
  <!-- styles -->
}

这可能看起来有些夸张，但就像我之前提到的那样，它会给您更大的控制权，我认为这不是坏习惯。