所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，以实现各种效果。
一、常见的几种选择器
1、标记选择器
一个HTML页面有很多不同的标记组成，声明哪些标记采用哪种CSS样式，即标记选择器。一旦声明那么页面中所有的该标记都会相应产生变化。例：
<html>
<head>
<title>标记选择器</title>
<style type="text/css">
<!--
h2{ /* 带h2标记的颜色为红色 */
color:red;
font-size:20px;
}
}
-->
</style>
</head>
<body>
<h2>格言</h2>
<p>好好学习，天天向上</p>
<h3>春晓</h3>
<p>春眠不觉晓，处处蚊子咬</p>
</body>
</html>
运行结果：
2、类别选择器
类别选择器的类别名称由用户自定义，属性和值跟标记选择器一样，类别名称前面有一个点符号如下例中的.first，或者在标记后接类别名称，如下例中的p.second，使用时需要在标签里添加class属性，指定类别选择器名称。
例：
<html>
<head>
<title>类别选择器</title>
<style type="text/css">
<!--
.first{
color:red; /* 红色 */
font-size:20px; /* 文字大小 */
}
p.second{
color:blue; /* 蓝色 */
font-size:17px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<h2 class="first">格言</h2>
<p class="second">好好学习，天天向上</p>
<h2 class="first">春晓</h2>
<p class="second">春眠不觉晓，处处蚊子咬</p>
</body>
</html>
运行结果：
3、ID选择器
在HTML标签里声明ID名称，然后在CSS样式里声明一个与此标签ID名称一样的选择器，选择器名称前有一个#号。如下例中的#one。ID选择器可以用于多个标记，但不推荐，因为JavaScript等脚本语言也要调用html中设置的id，可能引起混乱。
例：
<html>
<head>
<title>ID选择器</title>
<style type="text/css">
<!--
#one{
color:#F00; /* 红色 */
font-size:20px; /* 文字大小 */
}
#two{
color:blue; /* 蓝色 */
font-size:17px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p id="one">格言</p>
<p id="two">好好学习，天天向上</p>
<p>春晓</p>
<p>春眠不觉晓，处处蚊子咬</p>
</body>
</html>
运行结果：
二、这几种选择器的混合应用
1、选择器集体声明
如果某些选择器样式风格完全相同，或者部分相同，可以使用集体声明。各选择器间用逗号分隔。
例：
<html>
<head>
<title>选择器集体声明</title>
<style type="text/css">
<!--
h1,h2,h3,p{ /*标记选择器集体声明*/
color:green;
font-size:15px; /* 文字大小 */
}
h2.one,.two,#three{ /*类选择器，ID选择器的集体声明*/
text-decoration:none;
border-bottom: 1px solid red;
}
-->
</style>
</head>
<body>
<h1>格言</h1>
<h2 class="one">好好学习，天天向上</h2>
<h3 class="two">现在不受苦，将来必受罪</h3>
<p>春晓</p>
<p id="three">春眠不觉晓，处处蚊子咬</p>
</body>
</html>
运行结果：
2、选择器的嵌套
两个选择器之间用空格分开，前面的选择器嵌套后面的选择器，可以对特殊位置的HTML标记进行声明。如下例中的p b和.one b,p.one del，多个嵌套之间用逗号分隔
例：
<html>
<head>
<title>选择器的嵌套</title>
<style type="text/css">
<!--
p b{ /* 标记选择器的嵌套 */
color:Red;
font-size:20px;
}
.one b,p.one del{ /* 类别选择器(.one或p.one来表示)的嵌套 */
color:green;
font-size:20px;
}
#two b{ /* ID选择器的嵌套 */
color:blue;
font-size:20px;
}
-->
</style>
</head>
<body>
<p>格言</p>
<p >好好学习，<b>天天</b>向上</p>
<p class="one">现在不受苦，<b>将来</b>必<del>受罪</del></p>
<p>春晓</p>
<p id="two">春眠不觉晓，<b>处处</b>蚊子咬</p>
</body>
</html>
运行结果：
3、子选择器
选择一个父元素直接的子元素，不包括子元素的子元素，之间用大于号>分隔。如下例中的ul.myList>li>a，IE7不认这种选择器，firefox可以
例：
<html>
<head>
<title>子选择器</title>
<style type="text/css">
<!--
ul.myList>li>a{
color:red;
text-decoration:none;
}
-->
</style>
</head>
<body>
<ul class="myList">
<li><a href="#">春晓</a></li>
<ul>
<li><a href="#">春眠不觉晓</a></li>
<li><a href="#">处处蚊子咬</a></li>
<li><a href="#">夜来一翻身</a></li>
<li><a href="#">压死不老少</a></li>
</ul>
</ul>
</body>
</html>
运行结果：IE7不认这种选择器，firefox可以。如果要所有的都去掉下划线只需要把ul.myList>li>a改为ul.myList li a就可以了
4、属性选择器
针对HTML标记中的属性进行选择的。如下例的针对a标签的title属性进行设置 a[title]和a[title=c3]
例：
<html>
<head>
<title>属性选择器</title>
<style type="text/css">
<!--
a[title]{
color:green;
text-decoration:none;
}
a[title=c3]{
color:red;
text-decoration:none;
}
-->
</style>
</head>
<body>
<ul class="myList">
<li><a href="#">春晓</a></li>
<ul>
<li><a href="#" title="c1">春眠不觉晓</a></li>
<li><a href="#" title="c2">处处蚊子咬</a></li>
<li><a href="#" title="c3">夜来一翻身</a></li>
<li><a href="#" title="c4">压死不老少</a></li>
</ul>
</ul>
</body>
</html>
运行结果：IE7不认这种选择器，firefox可以。
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
