CSS交集选择器

最新推荐文章于 2024-06-12 20:14:43 发布

judyge

最新推荐文章于 2024-06-12 20:14:43 发布

阅读量9.1k

点赞数 1

分类专栏： js与前端

js与前端专栏收录该内容

863 篇文章 5 订阅

订阅专栏

CSS交集选择器的格式

第一种格式类似于：

h1.center {color:red; text-align:center;}

这种格式由标签选择器和类选择器组成。

第二种格式类似于：

h1#center {color:red; text-align:center;}

这种格式由标签选择器和id选择器组成。

两个选择器之间不能有空格，必须连续书写。

以上这两种格式组成的选择器，也就是前者所定义的标签类型和后者的类或者id的元素，称之为交集选择器。

示例一

<style type="text/css">
<!--
p{                /* 标签选择器 */
  color:blue;
}
p.color{          /* 交集选择器 */
  color: red;
}
.color{           /* 类选择器 */
  color:green;
}
-->
</style>

注意<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交集选择器的显示效果。如下图所示：

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

示例二

<style type="text/css">
<!--
p{
  color:blue;
}
p#color{
  color: red;
}
#color{
  color:green;
}
-->
</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">
<!--
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交集选择器示例二的显示效果。如下图所示：

查看CSS交集选择器示例二的显示效果

judyge

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
CSS交集选择器

CSS交集选择器的格式第一种格式类似于：h1.center {color:red; text-align:center;}这种格式由标签选择器和类选择器组成。第二种格式类似于：h1#center {color:red; text-align:center;}这种格式由标签选择器和id选择器组成。两个选择器之间不能有空格，必须连续书写。以上这两
复制链接

扫一扫

专栏目录