数据结构
网络
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.com/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.com/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.com/images/mongodb.png"></li>
<li><img src="https://tutorialspoint.com/images/db2.png"></li>
<li><img src="https://tutorialspoint.com/images/sql.png"></li>
</ul>
</body>
</html>
示例 2
在该示例中，我们有一个 <img> 标签，位于两个 <p> 标签之间 −
<p>This is demo text.</p> <img src="https://tutorialspoint.com/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.com/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+ 浏览量
广告