Grouping Selector in CSS

30 Jan 2025 | 4 分钟阅读

CSS 中的分组选择器有助于同时选择多个元素以使用样式属性。CSS 用于在 css 文件的单个 ID 名称、类名或单个元素上设置样式属性。分组选择器使用逗号分隔的元素名称在 css 文件的样式标签中。我们可以为分组选择器使用多个属性及其值。

语法

以下语法显示了 css 中的分组选择器。

selector1, selector2, ...... selectorN {
property: value; 
}

描述

选择器可以是元素的元素名、类名和 ID 名称。
逗号用作组选择器中两个元素的分隔符。
我们可以选择 ID、类和元素名称以相同的模式，或者使用混合来引用 HTML 元素。

示例

以下示例展示了 CSS 属性的分组选择器。

示例 1

该示例展示了 CSS 中具有吸引力样式的基本分组选择器。我们可以使用 div 标签的所有元素。

<!DOCTYPE html>
<html>
<head>
<title> Grouping selector in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 225px;
width: 420px;
border : 2px solid black;
}
h3, b, p, h5{
font-style: italic;
color: red;
border : 1px solid black;
margin-top: 4px;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Basic Grouping Selector in CSS
</h3>
<h5 id = "class2">
Grouping selectors in CSS helps to select multiple elements simultaneously to use the style properties. 
</h5>
<p>
Mostly, CSS is used to style properties on a single ID name, class name, or element. The grouping selector uses element names with commas in the style tag and css files. 
</p>
<b>
We can use multiple properties and their values for the grouping selector.
</b>
</div>
</body>
</html>

输出

示例 2

该示例展示了 CSS 中具有吸引力样式的基本分组选择器。我们可以使用具有类名的元素。

<!DOCTYPE html>
<html>
<head>
<title> Grouping selector in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 225px;
width: 420px;
border : 2px solid black;
}
.class1, .class2, .class3{
font-style: italic;
color: green;
border : 1px solid red;
margin-top: 4px;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Basic Grouping Selector in CSS with Class
</h3>
<h5 class = "class2">
Grouping selectors in CSS helps to select multiple elements simultaneously to use the style properties. 
</h5>
<p>
Mostly, CSS is used to style properties on a single ID name, class name, or element. The grouping selector uses element names with commas in the style tag and css files. 
</p>
<b class = "class3">
We can use multiple properties and their values for the grouping selector.
</b>
</div>
</body>
</html>

输出

以下输出显示了样式的组选择器。

示例 3

该示例展示了 CSS 中 not 选择器的分组选择器。我们可以在 not 标签中使用多个元素和 CSS 属性。

<!DOCTYPE html>
<html>
<head>
<title> Grouping selector in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 225px;
width: 420px;
border : 2px solid black;
}
:not(div, h3, h5, body, html){
font-style: italic;
color: green;
border : 1px solid red;
margin-top: 4px;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Basic Grouping Selector in CSS with Class
</h3>
<h5 class = "class2">
Grouping selectors in CSS helps to select multiple elements simultaneously to use the style properties. 
</h5>
<p>
Mostly, CSS is used to style properties on a single ID name, class name, or element. The grouping selector uses element names with commas in the style tag and css files. 
</p>
<b class = "class3">
We can use multiple properties and their values for the grouping selector.
</b>
</div>
</body>
</html>

输出

下图显示了 not 选择器的分组选择器。

示例 4

以下示例同时使用页面 ID 和类名的分组选择器。

<!DOCTYPE html>
<html>
<head>
<title> Grouping selector in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 225px;
width: 420px;
border : 2px solid black;
}
.class1, .class2, #id1{
font-style: italic;
background-color: grey;
color: white;
border : 1px solid pink;
margin-top: 4px;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Basic Grouping Selector in CSS with class and Id
</h3>
<h5 class = "class2">
Grouping selectors in CSS helps to select multiple elements simultaneously to use the style properties. 
</h5>
<p id = "id1">
Mostly, CSS is used to style properties on a single ID name, class name, or element. The grouping selector uses element names with commas in the style tag and css files. 
</p>
<b class = "class3">
We can use multiple properties and their values for the grouping selector.
</b>
</div>
</body>
</html>

输出

以下输出显示了样式的组选择器。

结论

对于具有不同元素数的多个网页，分组选择器是一个必需且重要的因素。

下一主题CSS 的特性

Grouping Selector in 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 多选题

面试题

Grouping Selector in CSS

语法

描述

示例

结论

相关帖子

CSS Layers

CSS Scrollbar inside Div

EM 在 CSS 中的完整形式

Class vs Id

Best CSS Fonts

CSS Border Bottom

CSS Class

CSS Box-Shadow Bottom Only

CSS Curved Border

Creating Neumorphic Designs with CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器