CSS并集选择器

最新推荐文章于 2025-05-29 10:30:11 发布

judyge

最新推荐文章于 2025-05-29 10:30:11 发布

阅读量1.8w

点赞数 1

分类专栏： js与前端

js与前端专栏收录该内容

863 篇文章

订阅专栏

CSS并集选择器也叫群选择器，是由多个选择器通过逗号连接在一起的，这些选择器分别是：标签选择器、类选择器或id选择器等。

在声明各种CSS选择器时，如果某些选择器的风格完全相同，或者部分相同，便可以利用并集选择器同时声明这些风格相同的CSS选择器。

并集选择器允许同时给多个选择器应用同一种样式。

CSS并集选择器的格式

并集选择器的格式类似于：

h1,h2,p,.color,#one{
  color:blue;
  font-size:14px;
}

这种集体声明的效果与单独声明的效果完全相同。

示例一

<style type="text/css">
<!--
h2,h3,h4,h5,p{                 /* 并集选择器 */
  color:purple;                /* 文字颜色 */
  font-size:24px;              /* 字体大小 */
}
#one,h2.two,.two{              /* 并集选择器 */
  text-decoration:underline;   /* 下划线 */
}
-->
</style>

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS并集选择器示例-www.baike369.com</title>
<style type="text/css">
<!--
h2,h3,h4,h5,p{
  color:purple;
  font-size:24px;
}
#one,h2.two,.two{
  text-decoration:underline;
}
-->
</style>
</head>
<body>
<h1>CSS并集选择器示例</h1>
<h2 class="two">示例标题h2</h2>
<h3>示例标题h3</h3>
<h4>示例标题h4</h4>
<h5>示例标题h5</h5>
<p>示例文本p1</p>
<p class="two">示例文本p2</p>
<p id="one">示例文本p3</p>
</body>
</html>

在浏览器中查看CSS并集选择器的显示效果。如下图所示：

查看CSS并集选择器的显示效果

示例二

*{                 /* 全局声明 */
  color:red;       /* 文字颜色 */
  font-size:24px;  /* 字体大小 */
}

一旦声明了全局选择器“*”，那么这个页面内的所有html标签的文字颜色全部为红色，字体大小全部为24px。

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS并集选择器之全局声明示例-baike369.com</title>
<style type="text/css">
<!--
*{
  color:red;
  font-size:24px;
}
#one,h2.two,.two{
  text-decoration:underline;
}
-->
</style>
</head>
<body>
<h1>CSS并集选择器之全局声明示例</h1>
<h2 class="two">全局声明之示例标题h2</h2>
<h3>全局声明之示例标题h3</h3>
<h4>全局声明之示例标题h4</h4>
<h5>全局声明之示例标题h5</h5>
<p>全局声明之示例文本p1</p>
<p class="two">全局声明之示例文本p2</p>
<p id="one">全局声明之示例文本p3</p>
</body>
</html>

在浏览器中查看CSS并集选择器之全局声明的显示效果。如下图所示：

查看CSS并集选择器之全局声明的显示效果