Kapatid na Kapatid na Magkakapatid ng CSS

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

Subukan mo ang sarili mo

语法解释

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

Komentaryo:Katulad ng naaangkop na pagsasama ng bata, maaaring magkaroon ng walang silbi ang naaangkop na magkakapatid na pagsasama.

Hilingin na tingnan ang sumusunod na bahagi ng kaganapan ng dokumento:

<div>
  <ul>
    <li>Item ng list 1</li>
    <li>Item ng list 2</li>
    <li>Item ng list 3</li>
  </ul>
  <ol>
    <li>Item ng list 1</li>
    <li>Item ng list 2</li>
    <li>Item ng list 3</li>
  </ol>
</div>

Sa itaas na pahina, ang elemento ng div ay may dalawang listahan: isang listahan na walang batayan at isang listahan na may batayan, bawat isa ay may tatlong item ng listahan. Ang dalawang listahan ay magkakapatid na magkakapatid, ang item ng listahan ay magkakapatid na magkakapatid. Gayunpaman, ang unang item ng listahan ay hindi magkakapatid na magkakapatid sa ikalawang item ng listahan, dahil ang dalawang magkakapatid na magkakapatid na ito ay hindi nasa parehong magulang na elemento (makakakuha lamang ng magkakapatid na kapatid na kapatid).

Tandaan mo na ang isang magkakapatid na magkakapatid ay maaaring pumili lamang ng ikalawang elemento sa dalawang magkakapatid na magkakapatid. Tingnan ang pilingan sa ibaba:

li + li {font-weight:bold;}

Ang pilingan na ito ay gagawin lamang ang pangalawang at ikatlong item ng listahan na magiging bold. Ang unang item ng listahan ay hindi na apektado.

Subukan mo ang sarili mo

Pagsama ng ibang pilingan

Ang magkakapatid na kapatid na magkakapatid na magkakapatid ay maaaring ipagsama sa ibang magkakapatid na magkakapatid:

html > body table + ul {margin-top:20px;}

Ang pilingan na ito ay ipinapaliwanag bilang: Pumili ng lahat ng magkakapatid na ul na lumitaw pagkatapos ng elemento ng table, na nasa loob ng elemento ng body, na ang elemento ng body ay anak ng elemento ng html.