CSS అడ్జాసెంట్ స్ట్రింగ్ సెలెక్టర్

సమీప సోదర ఎంపికకర్త (Adjacent sibling selector) మరొక మూలకం తర్వాత కనిపించే మూలకాన్ని ఎంపికచేయగలదు, మరియు వాటికి కలిసి ఉన్న ప్రాతిపదికన ఉన్నట్లయితే.

సమీప సోదర ఎంపికకర్త ఎంపిక

మరొక మూలకం తర్వాత కనిపించే మూలకాన్ని ఎంపికచేయాలి మరియు వాటికి కలిసి ఉన్న ప్రాతిపదికన ఉన్నట్లయితే, సమీప సోదర ఎంపికకర్త (Adjacent sibling selector) ఉపయోగించవచ్చు.

ఉదాహరణకు, h1 మూలకం తర్వాత కనిపించే పేరాంక్బర్త ఎంపికకర్త మీద మేలు చేయడానికి మీరు ఇలా రాయవచ్చు:

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

ఈ ఎంపికకర్త వాక్యం వాచకం అవుతుంది: “h1 మూలకం తర్వాత కనిపించే పేరాంక్బర్త ఎంపికకర్త అనేది, h1 మరియు p మూలకాలు కలిసి ఉన్న ప్రాతిపదికన ఎంపికకర్త అనేది”.

亲自试一试

వినియోగం వివరణ

సమీప సోదర ఎంపికకర్త ఉపయోగిస్తారు కొనసాగుతుంది ప్లస్ (ప్లస్ కమ్బైనెటర్).

పరిశీలన:సంతృప్తి సంకేతం తో పాటు, సమీప సోదర సంకేతం పక్కన శుభ్రమైన అక్షరాలు ఉండవచ్చు.

దిగువ పత్రం ముక్క చూడండి:

<div>
  <ul>
    <li>జాబితా అంశం 1</li>
    <li>జాబితా అంశం 2</li>
    <li>జాబితా అంశం 3</li>
  </ul>
  <ol>
    <li>జాబితా అంశం 1</li>
    <li>జాబితా అంశం 2</li>
    <li>జాబితా అంశం 3</li>
  </ol>
</div>

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

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

li + li {font-weight:bold;}

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

亲自试一试

结合其他选择器

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

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

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