CSS并集选择器
2016-07-17 23:34
302 查看
CSS并集选择器也叫群选择器，是由多个选择器通过逗号连接在一起的，这些选择器分别是：标签选择器、类选择器或id选择器等。
在声明各种CSS选择器时，如果某些选择器的风格完全相同，或者部分相同，便可以利用并集选择器同时声明这些风格相同的CSS选择器。
并集选择器允许同时给多个选择器应用同一种样式。
并集选择器的格式类似于：
这种集体声明的效果与单独声明的效果完全相同。
color:purple; /* 文字颜色 */
font-size:24px; /* 字体大小 */
}
text-decoration:underline; /* 下划线 */
}
-->
</style>[/code]
源代码如下：
在浏览器中查看CSS并集选择器的显示效果。如下图所示：
一旦声明了全局选择器“*”，那么这个页面内的所有html标签的文字颜色全部为红色，字体大小全部为24px。
源代码如下：
在浏览器中查看CSS并集选择器之全局声明的显示效果。如下图所示：
如果想让一系列网页元素共用相同格式化属性中的部分属性而不是全部属性，就可以创建一个带有共用格式化选项的并集选择器，然后为每个元素分别创建具有特殊样式的规则。换句话说，两种或者多种不同的样式可以格式化同一个标签。
在声明各种CSS选择器时，如果某些选择器的风格完全相同，或者部分相同，便可以利用并集选择器同时声明这些风格相同的CSS选择器。
并集选择器允许同时给多个选择器应用同一种样式。
CSS并集选择器的格式
并集选择器的格式类似于：h1,h2,p,.color,#one{
color:blue;
font-size:14px;
}这种集体声明的效果与单独声明的效果完全相同。
示例一
<style type="text/css"> <!-- [code]h2,h3,h4,h5,p{ /* 并集选择器 */
color:purple; /* 文字颜色 */
font-size:24px; /* 字体大小 */
}
#one,h2.two,.two{ /* 并集选择器 */
text-decoration:underline; /* 下划线 */
}
-->
</style>[/code]
源代码如下：
<!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并集选择器的显示效果。如下图所示：
示例二
*{ /* 全局声明 */
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并集选择器之全局声明的显示效果。如下图所示：
提示
如果想让一系列网页元素共用相同格式化属性中的部分属性而不是全部属性，就可以创建一个带有共用格式化选项的并集选择器，然后为每个元素分别创建具有特殊样式的规则。换句话说，两种或者多种不同的样式可以格式化同一个标签。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 