Mafunzo ya Chaguo cha Wengi wa Wengi cha CSS

Chaguo cha kinaadui cha wenzao (Adjacent sibling selector) cha kinaadui cha wenzao cha kina cha kina cha kina inaweza kuchagua elementi ambayo inafuata elementi nyingine na wenzao wao wana kina moja.

Chaguo cha kinaadui

Kama inahitajika kuchagua elementi ambayo inafuata elementi nyingine na wenzao wao wana kina moja, inaweza kutumia chaguo cha kinaadui cha wenzao (Adjacent sibling selector).

Kwa mfano, kama inahitajika kumpunguza ukubwa wa kina cha kina cha kina cha h1, inaweza kuandikwa kama:

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

Chaguo hicho laanishwa kama: “Chaguo ya kipema cha kina cha elementi hiki cha h1, kwa sababu h1 na p zina mmoja wa wengi wa kina.”

亲自试一试

Muungano wa lugha

Chaguo cha kinaadui cha wenzao cha kina chukuliwa na heri (+), kama kinaadui cha wenzao cha kina (Adjacent sibling combinator).

Maelezo:Kama kinaadui ya kipambana cha mtu wa familia, kinaadui cha wenzao wa kina na hali ya kipindi.

Angalia mwingine ya kipema cha mti cha andiko hapa chini:

<div>
  <ul>
    <li>Umemiaji 1</li>
    <li>Umemiaji 2</li>
    <li>Umemiaji 3</li>
  </ul>
  <ol>
    <li>Umemiaji 1</li>
    <li>Umemiaji 2</li>
    <li>Umemiaji 3</li>
  </ol>
</div>

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

亲自试一试

结合其他选择器

相邻兄弟结合符还可以结合其他结合符：

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

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。