类不包括子类css

Question

例如，我有以下情况：

.divtest {
  display: flex;
}
.test{
  display:block
}

<div class="divtest">
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
  <p class="test">This is another paragraph.</p>
</div>

当然，这不是我所期望的方式。我希望所有元素都可以灵活显示，但最后一个带有“ test”类的元素除外。是否可以将带有“ test”类的最后一个元素排除在“ divtest”类之外？我正在考虑使用not（），但不确定如何做。

Answer 1

使用弹性包装纸

  .divtest {
  display: flex;
   flex-wrap: wrap;
}
.test{
    display:block;
      width: calc(50% - 20px);
}

Answer 2

我不希望“测试”段落与其他人一起显示在第一行中

您要达到的目标无法通过更改子级的display属性来管理。

您只需要强制其宽度为100％，并在父级上添加环绕即可。

.divtest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content:space-between;
}

.test {
  flex: 1 0 100%;
  background: lightblue;
}

<div class="divtest">
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
  <p class="test">This is another paragraph.</p>
</div>

Answer 3

让所有显示的内容灵活显示并覆盖您的班级：

.divtest, .divtest * {
  display: flex;
}

.divtest .test {
  display: block
}

Answer 4

您可能是说...请运行代码：

.wrapper {
  display: flex;
}

<div class="divtest">
  <div class="wrapper">
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </div>
  <p class="test">This is another paragraph.</p>
</div>