非首位子元素选择器的使用

非首位子元素选择器的使用

前方元素 + 目标元素样式声明,它只会匹配紧跟其前方元素的同胞元素,该选择器使用加号“+”来链接前后两个选择器,选择器中的元素(均是兄弟同胞关系)有同一个父亲，而且第二个必须紧紧的跟着第一个。

li + li {

color: red;

}

img, span {

display: block;

}

img + span.caption {

font-style: italic;

color: red;

}

---

<ul>

<li>one</li> 这一行颜色不变

<li>one</li>

<li>two</li>

<li>three</li>

</ul>

---

<span class="caption">Before the photo</span>

<img src=“#”/>

<span class="caption">After first photo 1</span>

<span class="caption">After first photo 2</span>

<img src=“#”/>

<span class="caption">After The second photo</span>