CSS选择器-关系选择器
约 812 字大约 3 分钟
2025-10-15
根据元素的关系可以分为四类:
- 后代选择器
- 子代选择器
> - 邻接兄弟选择器
+ - 通用兄弟选择器
~
接下来分别介绍:
1. 后代选择器
选择某个元素的后代元素(不限层级,包括子元素、孙元素等)
基本语法:
祖先元素 后代元素 {
样式规则;
}使用示例:
style.css
/* 选择.container内的所有<p>元素 */
.container p {
color: blue;
font-size: 16px;
}
/* 选择.content内的所有<span>元素 */
.content span {
background-color: yellow;
padding: 5px;
}index.html
<div class="container">
<p>容器内的段落</p>
<div class="content">
<p>内容区域内的段落</p>
<span>内容区域内的span</span>
</div>
</div>
<p>容器外的段落</p>2. 子代选择器
子代选择器也叫“亲儿子选择器”,只会选择父类的直接子元素,对孙子、重孙等无效。
基本语法:
父元素 > 子元素 {
样式规则;
}基本使用示例:
style.css
/* 只针对侧边栏的直接h3子元素 */
.sidebar > h3 {
color: #ff6b6b;
border-bottom: 2px solid #ff6b6b;
padding-bottom: 10px;
}
/* 小工具内的h3不受影响 */
.widget h3 {
color: #333;
font-size: 1.2em;
}index.html
<div class="sidebar">
<div class="widget">
<h3>小工具标题</h3>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>
<h3>侧边栏标题</h3>
</div>3. 邻接兄弟选择器
邻接兄弟:指在HTML结构中紧跟在一个元素后面的同级元素
只选择直接相邻的兄弟元素,两个元素必须有相同的父元素,元素B必须紧接在元素A之后。
基本语法:
元素A + 元素B {
样式规则;
}使用示例:
style.css
/* 标题后面的第一个段落特殊样式 */
h1 + p,
h2 + p,
h3 + p {
font-size: 1.2em;
line-height: 1.6;
color: #555;
font-style: italic;
margin-bottom: 1.5em;
}
/* 如果第一个段落有lead类,进一步加强样式 */
h1 + .lead {
font-size: 1.3em;
color: #333;
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
}index.html
<article>
<h1>主要标题</h1>
<p class="lead">这是引导段落,需要特殊样式。</p>
<p>这是普通段落。</p>
<h2>次级标题</h2>
<p>另一个紧跟在标题后的段落。</p>
<p>普通段落。</p>
</article>4. 通用兄弟选择器
与邻接兄弟选择器不同的是,通用兄弟选择器选择位于一个元素后面的所有同级元素
选择当前标签后面所有兄弟元素(不一定是紧邻的),两个元素必须有相同的父元素,元素B可以在元素A后面的任何位置
基本语法:
元素A ~ 元素B {
样式规则;
}基本示例:
style.css
/* 标题后面的所有段落统一样式 */
h1 ~ p {
font-family: 'Georgia', serif;
font-size: 1.1em;
text-align: justify;
}
/* 特殊处理引言段落 */
h1 ~ p.intro {
font-size: 1.2em;
font-style: italic;
color: #7f8c8d;
border-left: 3px solid #3498db;
padding-left: 15px;
}index.html
<article class="blog-post">
<h1>博客文章标题</h1>
<p class="intro">引言段落</p>
<div class="image-container">
<img src="example.jpg" alt="示例图片">
</div>
<p>正文第一段</p>
<p>正文第二段</p>
<blockquote>引用内容</blockquote>
<p>正文第三段</p>
</article>