Question

我必须将一个我称为“无边界”的css类放置到我的无序列表中的每个项目上，通过继承，我认为如果将其放置在顶层，它将应用于所有子项，但不是。

我想要这个例子

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

无边界应用于所有孩子，例如

          <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选择器作为目标并对其应用某些样式。为了更好地理解样式是如何从父母遗传给孩子的，您需要阅读有关CSS Specificity的信息。

Answer 2

要让属性值从其父级继承而来，您必须告诉CSS这样做。

.borderless li{
    border: inherit;
}

或者如果您想通过使用.borderless选择器来申请*内的所有元素，可以给它一个通配符：

.borderless * {
    border: inherit;
}

请参阅CSS *选择器文档https://www.w3schools.com/cssref/sel_all.asp

ul li {
  border: 1px solid red;
}
.borderless {
    border-top: 0 none;
    border-left: 0 none;
    border-right: 0 none;
    border-bottom: 0 none;
}
.borderless li{
    border: inherit;
}

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

类属性未继承

2 个答案: