单独一个元素的选择器？ [复制]

Posted 2023-03-06

【中文标题】单独一个元素的选择器？ [复制]

【英文标题】：Selector for an element alone in a row? [duplicate]

【发布时间】：2017-02-03 21:49:16

【问题描述】：

我们有带有 2 个子元素的 flex 容器。

当我们调整窗口大小时，其中一个弹性项目被换行，我们将每个元素放在自己的行中。

是像:when-alone-in-row这样的选择器吗？

.flex-parent flex-flow: row wrap
    .flex-child
    .flex-child

【问题讨论】：

不，没有。

您可能会得到类似于您使用 CSS 媒体查询所要求的内容

显示您的 html，不要向我们描述它；在大多数情况下，语言过于模棱两可，无法充分描述结构。请参阅：“minimal reproducible example”（和“How to Ask”）指南。

当行中只有一项时，这取决于您要达到的目标。有一些技术可能在这里有所帮助，但目前这看起来像是一个 XY 问题。

@DavidThomas 我们在 css/css3/flexbox 部分，我认为很清楚 .flex-parent - 具有适当 css 属性的项目类和 .flex-child - 它的子元素弹性父母。

【参考方案1】：

如果它总是以相同的屏幕尺寸折叠，您可以使用媒体查询来调整样式，当它们在自己的行上时。

如果没有，可能还值得使用媒体查询进行折叠，这样您就可以更好地控制行/列。

【讨论】：

试图制作响应式内容独立代码，查询仅适用于设备依赖代码

啊，好吧。明白了。抱歉，我帮不上忙。

【参考方案2】：

不，没有类似于:when-alone-in-row 的选择器。

但是，当您想从一组兄弟元素中选择第一个和最后一个元素时（这里就是这种情况，因为您只处理两个弹性项目），您可以使用 :first-child 和 :last-child伪类。

当然，这些选择器应用的样式即使在两个项目在同一行时也可以工作，除非它们应用在媒体查询中。

【讨论】：

当 flex-wrap 工作时 - 它知道项目的宽度并知道何时进行换行，以及每个元素换行位置的状态。我想使用这些知识:) 使用 :first-child/:last-child/:nth-child 将是“后端”解决方案作为查询（他们不知道元素中有多少内容）而不知道客户端响应布局，它是“硬代码”，现在我想要最大的响应代码。

那么你可能不得不使用 javascript。

我更喜欢使用清晰的 CSS...flex 再次像 display:table 和其他“好”解决方案一样成为垃圾:(