css - 类属性不被继承

Question

我必须为我的无序列表中的每个元素放置一个名为“无边界”的 css 类，通过继承我想如果我将它放在顶层它会应用于它的所有子层，但事实并非如此。

我要这个例子

          <ul class="list-group">
              <li class="list-group-item borderless"">
                <i class="devicon-python-plain ""></i> Hello Stackoverflow
              </li>
    </ul>

将无边界应用到所有 child ，例如

          <ul class="list-group borderless">
              <li class="list-group-item"">
                <i class="devicon-python-plain ""></i> Hello Stackoverflow
              </li>
          </ul>

这不是 css 的继承方式吗？

CSS

.borderless {
    border-top: 0 none;
    border-left: 0 none;
    border-right: 0 none;
    border-bottom: 0 none;
}

Answer 1

这个 CSS 规则应该能让你得到想要的结果:

.borderless .list-group-item {
    border: none;
}

仅供引用，类不会被子级继承，它们仅用于标记 HTML 中的节点，然后您可以使用 CSS 选择器定位这些节点并对其应用某些样式。为了更好地理解风格是如何从 parent 那里继承给 child 的，您需要阅读 CSS Specificity .