如果我們想要匹配緊跟在第一個選擇器后出現的元素，我們可以使用相鄰兄弟選擇器（+）。在這里，兩個選擇器都是同一個父元素的子元素。
CSS相鄰兄弟組合器的語法如下：
Selector + Selector{
attribute: /*value*/
}
登錄后復制
如果我們想選擇同一父元素下的兄弟元素，不考慮第二個選定元素的位置，我們可以使用CSS通用兄弟選擇器。
CSS通用兄弟選擇器的語法如下：
Selector ~ Selector{
attribute: /*value*/
}
登錄后復制
下面的例子演示了CSS相鄰和一般兄弟選擇器屬性。
例子
演示
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
display: flex;
margin: 2%;
padding: 2%;
box-shadow: inset 0 0 24px cyan;
justify-content: space-around;
}
div + p {
font-size: 1.2em;
font-weight: bold;
background: powderblue;
}
section {
box-shadow: 0 0 3px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Check this</p>
<section><p>Some text in section</p></section>
<span>hello</span>
</div>
<p>Selected</p>
</div>
</body>
</html>
登錄后復制
輸出
這將產生以下結果 –
示例
?現場演示
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
display: flex;
margin: 2%;
padding: 2%;
background: thistle;
justify-content: space-between;
}
section ~ p {
text-align: center;
font-size: 1.2em;
font-weight: bold;
background: lavender;
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Random text 1</p>
<section><p>Some text in section</p></section>
<span>hello</span>
<p>Selected</p>
</div>
<img src="https://i.picsum.photos/id/1035/200/200.jpg?hmac=IDuYUZQ_7a6h4pQU2k7p2nxTMjMt4uy-p3ze94KtA4" />
</div>
</body>
</html>
登錄后復制
輸出
這將產生以下結果 ?
以上就是使用 CSS 選擇同級元素的詳細內容，更多請關注www.92cms.cn其它相關文章！
