CSS样式选择器的种类总结

时间：2011-06-02 来源：极致书生

1.HTML selector(HTML代码选择器)
就是CSS样式定义什么类型的HTML标签，CSS样式就对该类HTML标签所起作用。
例如下面的代码样式选择器用的是p，那么该样式将对该网页中的所有<P></p>标签之间的内容起作用。

<html>
<head>
<style>
<!--
P{background:red}
-->
</style>
</head>
<body>
<p>应用了css样式的段落</p>
</body>
</html>

2.CLASS selector(CLASS选择器)

<html>
<head>
<style>
<!--
P.style1{color:red}
p.style2{color:yellow}
p.style3{color:green}
-->
</style>
</head>
<body>
<p class="style1">第一段样式为style1</p>
<p class="style2">第二段样式为style2</p>
<p class="style3">第三段样式为style3</p>
</body>
</html>

也可以在样式表中为所有的HTML标签定义同样的样式规则。

<html>
<head>
<style>
<!--
.style123{color:red}
-->
</style>
</head>
<body>
<h2 class="style123">标题</h2>
<p class="style123">第一段样式为style123</p>
<p class="style123">第二段样式为style123</p>
<p class="style123">第三段样式为style123</p>
</body>
</html>

3.ID selector（ID选择器）

ID属性是HTML元素唯一标识，CSS样式表中的ID selector就是为了网页中某一特定且唯一ID属性值的HTML元素应用该样式。

<html>
<head>
<style>
<!--
#style123{color:blue}
-->
</style>
</head>
<body>
<p id=style123>第一段样式为style123</p>
<p >第二段样式为style123</p>
</body>
</html>

4.关联选择器

<html>
<head>
<style>
<!--
P.style1 EM{color:blue}
P.style2 EM{color:red}
-->
</style>
</head>
<body>
<p class="style1"><em>第一</em>段样式为style123</p>
<p class="style2"><em>第二</em>段样式为style123</p>
</body>
</html>

5.组合选择器

<html>
<head>
<style>
<!--
h1,h2,h3,h4,h5,h6,p{color:red}
-->
</style>
</head>
<body bgcolor=black>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<p>这是一个段落</p>
</body>
</html>