CSS交集选择器
2016-07-17 23:30
453 查看
CSS交集选择器的格式
第一种格式类似于：h1.center {color:red; text-align:center;}这种格式由标签选择器和类选择器组成。
第二种格式类似于：
h1#center {color:red; text-align:center;}这种格式由标签选择器和id选择器组成。
两个选择器之间不能有空格，必须连续书写。
以上这两种格式组成的选择器，也就是前者所定义的标签类型和后者的类或者id的元素，称之为交集选择器。
示例一
<style type="text/css">
<!--
p{ /* 标签选择器 */
color:blue;
}
[code]p.color{ /* 交集选择器 */color: red;
}
.color{ /* 类选择器 */
color:green;
}
-->
</style>[/code]
注意<p>标签加载CSS样式的顺序！
在上述代码中：
<p class="center">在样式表中首先加载p.color{...}，如果p.color{...}不存在，才会加载.color{...}，本例是加载p.color{...}。
同样，<h2 class="color">首先加载h2.color{...}，因为h2.color{...}不存在，所以加载了.color{...}。
在p.color{...}中定义的风格样式只适用于<p class="color">标签，而不会影响使用了.color的其它标签。
源代码如下：
<!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">
<!--
p{
color:blue;
}
p.color{
color: red;
}
.color{
color:green;
}
-->
</style>
</head>
<body>
<h1>CSS交集选择器示例</h1>
<p>这是普通段落，蓝色。</p>
<p class="color">这是普通段落，红色。</p>
<h2 class="color">这是标题文本，绿色。</h2>
</body>
</html>在浏览器中查看CSS交集选择器的显示效果。如下图所示：
示例二
<style type="text/css">
<!--
p{
color:blue;
}
[code]p#color{color: red;
}
#color{
color:green;
}
-->
</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">
<!--
p{
color:blue;
}
p#color{
color: red;
}
#color{
color:green;
}
-->
</style>
</head>
<body>
<h1>CSS交集选择器示例二</h1>
<p>普通段落，蓝色</p>
<p id="color">普通段落，红色</p>
<h2 id="color">标题文本，绿色</h2>
</body>
</html>在浏览器中查看CSS交集选择器示例二的显示效果。如下图所示：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 