数据结构
网络
关系型数据库管理系统
操作系统
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.com/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.com/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.com/cprogramming/images/c-mini-logo.jpg" />
</div>
</body>
</html>
更新于: 2023 年 12 月 26 日
3K+ 浏览量
广告