元素之前和之前元素的CSS选择器

Question

在以下结构中，在H2之后和H3之后划分P标签的方式。 h2之后的段落需要其他风格。

H2
P
P
H3
P
P
P
H2
P
P
...
H3
P
P

Answer 1

我认为这就是你要找的东西：

h2＆gt; p （CSS 2）： 选择所有 p 元素，其中父元素是 h2 元素

h2 + p （CSS 2）： 选择紧跟在 h2 元素之后的所有 p 元素

h2~p （CSS 3）： 选择前面带有 h2 元素的每个 p 元素

也许这个链接很有用： https://www.w3schools.com/cssref/css_selectors.asp

对于你的情况：

    h2 ~ p{
      font-size: 14px;
      color: red;
    }

    h3 + p, 
    h3 + p + p, 
    h3 + p + p + p{
      font-size: 12px;
      color: blue;
    }

    <H2> H2 TAG </H2>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <H3> H3 TAG </H3>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <H2> H2 TAG </H2>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <H3> H3 TAG </H3>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>