資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中的一般相鄰選擇器
CSS 通用相鄰選擇器用於選擇所有後續元素，條件是這兩個元素是同一個父元素的子元素。
語法
CSS 通用相鄰選擇器的語法如下
element ~ element {
/*declarations*/
}
以下示例說明了 CSS 通用相鄰選擇器 −
示例 1
在該示例中，我們有 <ul> 標籤。我們還有一個 <p> 標籤，位於兩個 <ul> 標籤之間 −
<ul> <li><img src="https://tutorialspoint.tw/images/pl-sql.png"></li> </ul> <p>We provide learning tutorials, quizzes and video tutorials.</p> <ul> <li>Tutorials on databases and programming languages.</li> <li>Quizzes to check knowledge of databases and languages.</li> <li>Video Tutorials to easily understand the technologies.</li> </ul>
對於 <p> 標籤之後的 <ul> 標籤，我們使用通用相鄰選擇器的概念設定了樣式 −
p ~ ul {
box-shadow: inset 4px 0 3px lime;
}
示例
舉例說明 −
<!DOCTYPE html>
<html>
<head>
<style>
* {
float: left;
padding-left: 14px;
list-style: none;
}
p ~ ul {
box-shadow: inset 4px 0 3px lime;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<ul>
<li><img src="https://tutorialspoint.tw/images/pl-sql.png"></li>
</ul>
<p>We provide learning tutorials, quizzes and video tutorials.</p>
<ul>
<li>Tutorials on databases and programming languages.</li>
<li>Quizzes to check knowledge of databases and languages.</li>
<li>Video Tutorials to easily understand the technologies.</li>
</ul>
<ul>
<li><img src="https://tutorialspoint.tw/images/mongodb.png"></li>
<li><img src="https://tutorialspoint.tw/images/db2.png"></li>
<li><img src="https://tutorialspoint.tw/images/sql.png"></li>
</ul>
</body>
</html>
示例 2
在該示例中，我們有一個 <img> 標籤，位於兩個 <p> 標籤之間 −
<p>This is demo text.</p> <img src="https://tutorialspoint.tw/big_data_analytics/images/big-data-analytics-mini-logo.jpg"> <p>Learn Big Data Analytics at no cost.</p>
對於 <ul> 標籤之後的 <p> 標籤，我們使用通用相鄰選擇器的概念更改了背景顏色 −
img ~ p {
background-color: burlywood;
}
示例
舉例說明 −
<!DOCTYPE html>
<html>
<head>
<style>
* {
float: left;
padding: 10px;
list-style: none;
}
img ~ p {
background-color: burlywood;
}
</style>
</head>
<body>
<p>This is demo text.</p>
<img src="https://tutorialspoint.tw/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>Learn Big Data Analytics at no cost.</p>
</body>
</html>
更新於： 2023-11-02
1K+ 瀏覽量
廣告