資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究使用 CSS 選擇同級元素
要使用 CSS 選擇同級元素，我們可以使用相鄰同級選擇器或非相鄰同級選擇器。讓我們結合具體示例一一瞭解它們。它們均允許使用 HTML 和 CSS 選擇同級元素。
相鄰同級選擇器
如果我們想匹配緊隨第一個選擇器之後出現的元素，請使用相鄰同級選擇器 (+)。此處，兩個選擇器都是同一父元素的子元素。
CSS 相鄰同級組合器的語法如下 −
Selector + Selector{
attribute: /*value*/
}
以下示例說明了 CSS 相鄰組合器屬性。在此，div + p 將選擇並設定樣式緊隨 <div> 元素之後放置的第一個 <p> 元素 −
div + p {
font-size: 1.2em;
font-weight: bold;
background: powderblue;
}
示例
讓我們看下示例 −
<!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://tutorialspoint.tw/cprogramming/images/c-mini-logo.jpg" />
<div>
<p>Check this</p>
<section>
<p>Some text in section</p>
</section>
<span>hello</span>
</div>
<p>Selected</p>
</div>
</body>
</html>
非相鄰同級選擇器
如果我們想選擇同一父元素的同級元素（與第二個已選擇元素的位置無關），請使用 CSS 非相鄰同級組合器。
CSS 非相鄰同級組合器的語法如下 −
Selector ~ Selector{
attribute: /*value*/
}
以下示例說明了 CSS 非相鄰同級組合器屬性。選擇緊隨 <section> 元素之後出現的每個 <p> 元素 −
section ~ p {
text-align: center;
font-size: 1.2em;
font-weight: bold;
background: lavender;
}
示例
讓我們看下示例 −
<!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://tutorialspoint.tw/java/images/java-mini-logo.jpg" />
<div>
<p>Random text 1</p>
<section>
<p>Some text in section</p>
</section>
<span>hello</span>
<p>Selected</p>
</div>
<img src="https://tutorialspoint.tw/cprogramming/images/c-mini-logo.jpg" />
</div>
</body>
</html>
更新於: 2023 年 12 月 26 日
3K+ 瀏覽量
廣告