兄弟元素选择器的问题

来源：2-1 基本选择器

我学习太差被关起来了

2019-07-22 13:45:46

例子1如下：

section > div + article
{color: red;}

<body>
   <section>
           <div>This is div</div>
           <article>This is article</article>
           <p>This is paragraph1.</p>
           <p>This is paragraph2.</p>
           <p>This is paragraph3.</p>
       </section>
</body>

效果是article文字变红，没有问题。

我的问题是例子2，如下。

section > div + p
{color: red;}

<body>
   <section>
           <div>This is div</div>
           <article>This is article</article>
           <p>This is paragraph1.</p>
           <p>This is paragraph2.</p>
           <p>This is paragraph3.</p>
       </section>
</body>

按照相邻兄弟选择器，应该选择section元素的子元素div的后面第一个<p>标签，This is paragraph1.文字应该变红。但实际效果却没有变化。为什么呢？