类排除子类css答案

【问题标题】：Class exclude child class css类排除子类css
【发布时间】：2020-04-27 01:55:16
【问题描述】：

例如我有以下情况：

.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() 但不知道该怎么做。

【问题讨论】：

预期的方式是什么？您能否提供一个示例，说明给定标记的结果应该是什么？我想这是一个 X/Y 问题
我希望除 LAST ITEM 之外的所有元素都显示为 FLEX。这个带有“test”类的段落不具有 .divtest 的属性。我希望“测试”段落不与其他人一起显示在 1 行。

标签： html css css-selectors

【解决方案1】：

用你的类让所有显示灵活和覆盖：

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

.divtest .test {
  display: block
}

【讨论】：

不，因为
这是另一个段落。
仍然显示在包含所有元素的 1 行
当然，paragraphs parent 仍然是flex，你不能只弯曲它的一部分children。你应该看看 flex 到底做了什么。

【解决方案2】：

使用弹性包装

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

【讨论】：

不。这只是一个简单的例子。我只需要从子元素中排除所有这些主要的 div 属性。
我更新了我的答案，你可以检查一次吗
对不起，没有区别。我认为关键在于使用:not()。但不确定如何

【解决方案3】：

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

您试图实现的目标无法通过更改子级的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>

【讨论】：

这就是答案。谢谢，项目也进展顺利。