如何使用 CSS 选择同级元素

2025年1月30日 | 阅读 6 分钟

兄弟选择器使用组合符在 CSS 中选择 HTML 标签的元素。相邻兄弟选择器和通用兄弟选择器都用于 CSS 来样式化标签。兄弟选择器用于样式化标签和设计给定的兄弟元素。它也用于用户交互功能，如表单、表格、列表和其他显示信息选项卡。

在 CSS 中选择兄弟元素有两种方式。

相邻兄弟选择器
通用兄弟选择器。

CSS 相邻兄弟选择器

相邻兄弟选择器使用 CSS 选择特定元素旁边的元素。兄弟选择器必须在同一个父元素内。此兄弟选择器不适用于内联样式标签。

语法

以下语法显示了相邻兄弟选择器。

<style>
Elements + elements {
/* write css properties for the sibling element */
}
div + div {
/* write css properties for the sibling element */
}
</style>

示例

以下示例显示了 CSS 中的相邻兄弟选择器。

示例 1

该示例使用 CSS 组合属性显示了相邻元素的基本兄弟选择器。

<!DOCTYPE html>
<html>
<head>
<title> How to Select Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
p + p{
font-size: 18px;
background-color: orange;
font-style:italic;
text-align:center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> How to Select Sibling Element using CSS </h3>
<h5> select adjacent sibling element using CSS </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上兄弟元素的样式。

示例 2

该示例使用 CSS 显示了相邻元素的相邻兄弟选择器。我们可以使用类名或 ID 名称来选择元素。

<!DOCTYPE html>
<html>
<head>
<title> How to Select Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
.clips + p{
font-size: 18px;
background-color: aqua;
font-style:italic;
text-align:center;
}
.clip3 + .clips{
font-size: 18px;
background-color: orange;
font-style:italic;
text-align:center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3 class = "clip2"> How to Select Sibling Element using CSS </h3>
<h5 class = "clip2"> select the adjacent sibling element using CSS </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clips"> Third paragraph </p>
<p class = "clips"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上兄弟元素的样式。

示例 3

以下示例使用 CSS 属性显示了基本相邻兄弟元素。

<!DOCTYPE html>
<html>
<head>
<title> How to Select Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
th + th{
font-size: 18px;
background-color: aqua;
font-style:italic;
text-align:center;
}
td + td{
font-size: 18px;
background-color: orange;
text-align:center;
}
table {
width: 100%;
border: 2px solid black;
}

td, th {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> How to Select Sibling Element using CSS </h3>
<h5> select Adjacent sibling element using CSS </h5>
<div class = "flex-containers">
<table>
<thead>
<th> Student </th>
<th> Subject </th>
<th> Country </th>
</thead>
<tbody>
<tr>
<td> Radha </td>
<td> CSS </td>
<td> India </td>
</tr>
<tr>
<td> Adam </td>
<td> JavaScript </td>
<td> Mexico </td>
</tr>
<tr>
<td> Helen </td>
<td> Java </td>
<td> UK </td>
</tr>
<tr>
<td> Roland </td>
<td> React </td>
<td> Austria </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

输出

以下输出显示了通用兄弟元素

CSS 通用兄弟选择器

通用兄弟选择器使用 CSS 选择与特定元素在同一个父元素内的元素。兄弟选择器不需要相邻选择器，但需要与元素在同一个元素内。此兄弟选择器不适用于内联样式标签。

语法

以下语法显示了 CSS 中的通用兄弟选择器。

<style>
Element1 ~ element2 {
/* write the css properties for the sibling element */
}
div + p {
/* write the css properties for the sibling element */
}
</style>

示例

以下示例展示了如何使用 CSS 选择通用兄弟元素。

示例 1

以下示例使用 CSS 属性显示了基本通用兄弟元素。

<!DOCTYPE html>
<html>
<head>
<title> How to Select Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
b ~ p{
font-size: 18px;
background-color: aqua;
font-style:italic;
text-align:center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> How to Select Sibling Element using CSS </h3>
<h5> select General sibling element using CSS </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>

输出

以下输出显示了通用兄弟元素

示例 2

以下示例使用 CSS 属性显示了基本通用兄弟元素。

<!DOCTYPE html>
<html>
<head>
<title> How to Select Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
td ~ td{
font-size: 18px;
background-color: aqua;
font-style:italic;
text-align:center;
}
table {
width: 100%;
border: 2px solid black;
}

td, th {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> How to Select Sibling Element using CSS </h3>
<h5> select General sibling element using CSS </h5>
<div class = "flex-containers">
<table>
<tr>
<th> Student </th>
<th> Subject </th>
<th> Country </th>
</tr>
<tr>
<td> Radha </td>
<td> CSS </td>
<td> India </td>
</tr>
<tr>
<td> Adam </td>
<td> JavaScript </td>
<td> Mexico </td>
</tr>
<tr>
<td> Helen </td>
<td> Java </td>
<td> UK </td>
</tr>
<tr>
<td> Roland </td>
<td> React </td>
<td> Austria </td>
</tr>
</table>
</div>
</div>
</body>
</html>

输出

以下输出显示了通用兄弟元素

示例 3

该示例使用 CSS 显示了相邻元素的通用兄弟选择器。我们可以使用类名或 ID 名称来选择元素。

<!DOCTYPE html>
<html>
<head>
<title> How to General Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
.clips ~ p{
font-size: 18px;
background-color: aqua;
font-style:italic;
text-align:center;
}
.clip2 ~ .clips{
font-size: 18px;
background-color: orange;
font-style:italic;
text-align:center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3 class = "clip2"> How to Select Sibling Element using CSS </h3>
<h5 class = "clip2"> select the adjacent sibling element using CSS </h5>
<div class = "flex-containers">
<p class = "clips"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clips"> Third paragraph </p>
<p class = "clips"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上兄弟元素的样式。

结论

兄弟元素用于设计样式，并在网页上突出用户。我们可以使用 CSS 选择兄弟元素来实现用户交互和吸引人的功能。

下一个主题Media-query-css-min-and-max

如何使用 CSS 选择同级元素

CSS 相邻兄弟选择器

语法

示例

示例 2

示例 3

CSS 通用兄弟选择器

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何使用 CSS 选择同级元素

CSS 相邻兄弟选择器

语法

示例

示例 2

示例 3

CSS 通用兄弟选择器

语法

示例

结论

相关帖子

CSS Filter Property

Best CSS Fonts

CSS Float Left

CSS Prototyping

CSS Onclick

CSS Layers

CSS 中的 Input Placeholder Selector

EM 在 CSS 中的完整形式

Linear Gradient Background Image in CSS

Fit to the Parent Height in CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器