資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會學
服裝研究
法律研究CSS 相鄰兄弟選擇器
CSS 相鄰兄弟選擇器用於選擇某個元素的相鄰兄弟元素。它僅用於選擇緊隨第一個選擇器之後的那些元素。+ 號用作分隔符。例如，以下內容演示如何使用相鄰兄弟選擇器概念選擇直接後一個元素 −
語法
CSS 相鄰兄弟選擇器的語法如下 −
element + element {
/*declarations*/
}
相鄰兄弟選擇器示例
示例
以下示例說明了 CSS 相鄰兄弟選擇器 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 8px;
height: 50px;
width: 60px;
display: flex;
float: left;
border-radius: 5%;
border: 2px solid brown;
box-shadow: inset 0 2px 12px olivedrab;
}
div + div {
border-radius: 50%;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<hr>
<div></div>
<div></div>
</body>
</html>
後一個 span 元素由 + 選擇器選擇
示例
在此示例中，直接後一個 <span> 元素由 + 選擇器選擇 −
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 1.5em;
}
span {
background-color: lavender;
}
span + span {
background-color: darkseagreen;
}
</style>
</head>
<body>
<p>
<span>Demo text</span> <span>goes here</span>
</p>
</body>
</html>
後一個直接元素由 + 選擇器選擇
示例
此示例中，後一個直接元素由 + 選擇器選擇 −
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
color: white;
background-color: red;
border: 2px solid green;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>Demo text 1</p>
<p>Demo text 2</p>
</div>
<p>Demo text 3</p>
<div>
<p>Demo text 4</p>
<p>Demo text 5</p>
<p>Demo text 6</p>
<p>Demo text 7</p>
<p>Demo text 8</p>
</div>
<p>Demo text 9</p>
</body>
</html>
在 p 之後立即選擇了下一個 p 元素
示例
此示例中，<p> 在 <p> 之後立即選擇 −
<!DOCTYPE html>
<html>
<head>
<style>
p + p {
color: white;
background-color: red;
border: 2px solid green;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>Demo text 1</p>
<p>Demo text 2</p>
</div>
<div>
<p>Demo text 3</p>
<p>Demo text 4</p>
<p>Demo text 5</p>
<p>Demo text 6</p>
<p>Demo text 7</p>
</div>
<p>Demo text 8</p>
</body>
</html>
更新日期：2023-10-27
1 千次瀏覽
廣告