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交集选择器的显示效果。如下图所示:
示例二
<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交集选择器示例二的显示效果。如下图所示: