Html 当只有一个子元素时，删除伪元素

我使用了一个不可见的伪元素（

：：after

），它占据了容器中的最后一个插槽。但是如果只有一个元素，我想把它放在中间

因此，为了做到这一点，我需要在这种情况下“删除”伪元素

如果可能的话，我该怎么做

.main{
背景：#999；
保证金：0自动；
宽度：500px；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.盒子{
背景#7ab9d7；
颜色：#555；
高度：30px；
宽度：30%；
边缘底部：30px；
文本对齐：居中；
字体大小：30px；
填充顶部：120px；
}
.main：：之后{
身高：0；
宽度：30%；
内容：“；
}

1.

要实现这一点，首先需要删除

：：在

之后，然后需要

调整内容：中心margin:0 auto 30px 0为左中心的最后一个框设置代码>和目标

但是，最后一个框也可以是第一个框，以覆盖此用途：

   .box:first-child {
        margin: 0 auto 30px auto !important;
    }

要在每个框中获得额外的填充，您需要添加额外的
div
，并分别添加蓝色背景


.main{
背景：#999；
保证金：0自动；
宽度：500px；
显示器：flex；
柔性包装：包装；
/*证明内容：之间的空间*/
证明内容：中心；
对齐项目：居中；
}
.盒子{
背景#7ab9d7；
颜色：#555；
高度：30px；
/*宽度：30%*/
边缘底部：30px；
文本对齐：居中；
字体大小：30px；
填充顶部：120px；
/*flex：自动*/
/*弹性：1*/
弹性基准：33.33%；
}
.盒子：最后一个孩子{
保证金：0自动30px 0；
}
.盒子：第一个孩子{
保证金：0自动30px自动！重要；
}
/*
.main：：之后{
身高：0；
宽度：30%；
内容：“；
}
*/

1.
2.
3.
4.
5.
试试这个。更新了。删除了用作占位符的伪元素。下面是更新的CSS

.main {
  background: #999;
  margin: 0 auto;
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.box {
  background: #7ab9d7;
  color: #555;
  height: 30px;
  width: 30%;
  margin-bottom: 30px;
  text-align: center;
  font-size: 30px;
  padding-top: 120px;
}
.box:not(:nth-child(3n)) {
  margin-right: 5%;
}
.box:only-child {
  margin-right: auto;
  margin-left: auto;
}



如果父级中有一个子级，如何不显示：：after内容

没有CSS方法（今天，但有一天可能会使用父选择器）根据flex项的数量删除伪项，即使它是子项并充当flex项，也不能通过其父项以外的任何东西明确地将其作为目标


一个简单的解决方法是，当只有一个元素时，使用左边距和
变换
，这里使用
唯一子元素
选择器

可以使用
位置：relative；左：50%
也一样，尽管
左边的边距
少了一行

这将适用于任意数量的元素，而不管其大小

堆栈片段


.main{
背景：#999；
保证金：0自动；
宽度：500px；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.盒子{
背景#7ab9d7；
颜色：#555；
高度：30px；
宽度：30%；
边缘底部：30px；
文本对齐：居中；
字体大小：30px；
填充顶部：120px；
}
.main：：之后{
身高：0；
宽度：30%；
内容：“；
}
.main div:独生子女{/*已添加规则*/
左边距：50%；
转化：translateX（-50%）；
}

1.


1.
1.


1.
1.
1.
1.

使用flexbox并没有简单的解决方案，因为flexbox不是为这种布局设计的

请注意，您需要一个hack–伪元素–来实现主布局

因此，毫不奇怪，你需要一个更复杂的黑客——见其他答案——来构建该布局的变体

Flexbox通过分配自由空间实现灵活性。一旦你开始限制这种灵活性（例如，通过引入一个假的项目来保持一个位置，迫使flex项目停留在一列中），flexbox就开始崩溃

这里进一步解释了这一概念：

这是W3C的人员所意识到的一个问题/限制，这也是他们推出CSS网格布局的原因之一，它干净、轻松地解决了这个问题：

多项


.main{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：150px 150px；
网格行间距：30px；
栅柱间隙：3%；
宽度：500px；
背景：#999；
保证金：0自动；
}
.盒子{
显示器：flex；
对齐项目：柔性端；
证明内容：中心；
文本对齐：居中；
背景#7ab9d7；
颜色：#555；
字体大小：30px；
}
.盒子：独生子女{
网格柱：2/3；
}

1.
2.
3.
4.
5.
删除宽度如何：30%？如果只有一个
.box
，您想删除伪元素或将其居中？@karthikaruna remove pseudo element在发布的通用解决方案中，如果只有一个项目，则应将其居中，这意味着当两个或更多项目左对齐时。我刚才在下面的评论中注意到，你现在也一个接一个地说“居中”。这是否意味着如果有2个，它们也应该居中，而不是左对齐？如果一行中有1个或2个项目会怎么样？@LGSon通常不管一行中有多少项目：1）如果只有一行，那么项目应该在其中居中2）如果有两行或更多行-最后一行中的项目应该左对齐，它看起来像这样，我想把它看作一行-像这样