Question

我试图创建一组CSS选择器，在某些元素之后缩进段落。

我已经p + p正常工作了，但这会错过标题之后的段落。尝试h1,h2,h3,h4,h5,h6 + p没有所需的结果 - 标题缩进而不是段落。

显然，我可以通过为每个级别的标题（h1 + p; h2 + p; etc）设置单独的选择器来解决这个问题，但我想知道是否有人知道更优雅的解决方案，最好是一个选择器。

Answer 1

为什么不起作用？

h1,h2,h3,h4,h5,h6 + p将选择所有h6元素并将样式应用于与其相邻/兄弟的段落元素。

<强>替代：

如果标题项和段落项是父元素中唯一的子元素。对:not(p)

排除的所有元素使用p

.container *:not(p) + p {
  color: white;
  background: #FF6868;
}

<div class="container">
  <h1>Test h1</h1>
  <p>Test</p>
  <h2>Test h2</h2>
  <p>Test</p>
  <h3>Test h3</h3>
  <p>Test</p>
  <h4>Test h4</h4>
  <p>Test</p>
  <h5>Test h5</h5>
  <p>Test</p>
  <h6>Test h6</h6>
  <p>Test</p>
</div>

Answer 2

我认为您需要的是以下一组选择器：

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p

语法要求您在每个标头标记后添加“+ p”。

在当前的选择器中，CSS应用于标题h1-h5和h6 + p。

这看起来可能并不优雅，但这正是您所需要的。

为什么没有CSS选择器＆＃34; h1，h2，h3，h4，h5，h6 + p＆＃34;工作，还有什么选择？

2 个答案: