CSS定义选择器的id和类详解和实例教程
1、首先我们来看看ID定义型来设置CSS样式，这里ID只能在一个页面使用一次，作为某个元素的唯一表示符，这里通过实例来说明，具体代码如下：
<html>
<head>
<title>CSS选择器</title>
<style type="text/css">
#title{
color:red;
}
</style>
</head>
<body>
<p id="title">用ID来设置字体颜色为红色，具体代码如下。
</body>
</html>
可以看到这里使用的是#加上ID名字来设置ID的标题，使用的时候直接用id="id名”就不要前面的#号了。
2、现在来学习使用标记定义型的选择器，使用HTML的标签来直接设置CSS的样式，这里来设置H2这个标签的字体颜色为红色的具体代码如下：
<html>
<head>
<title>CSS选择器</title>
<style type="text/css">
h2{
color:red;
}
</style>
</head>
<body>
<h2>我是第一个H2</h2>
<h2>我是第二个H2</h2>
</body>
</html>
如下图可以看到，两个H2的字体颜色都变成红色了，我们在上面只是对H2的设置就好了，不用做其他的额外的设置。
3、我们还可以将选择器和ID结合，选择器是HTML的标签直接来设置CSS的样式的，具体的实现代码如下：
<html>
<head>
<title>CSS选择器</title>
<style type="text/css">
h2#title{
color:red;
}
</style>
</head>
<body>
<h2 id="title">我是H2</h2>
<p id="title">我是P
</body>
</html>
可以看到代码，p和H2这两个标签添加了title这个ID，只有h2有效果了。
4、在步骤3上面，如果要实现p和h2的字体显示不同颜色我们该怎么做呢？具体的代码如下：
<html>
<head>
<title>CSS选择器</title>
<style type="text/css">
h2#title{
color:red;
}
p#title{
color:blue;
}
</style>
</head>
<body>
<h2 id="title">我是H2</h2>
<p id="title">我是P
</body>
</html>
通过P#title和h2#title来分别设置不同的颜色，具体显示效果如下。
5、如果我们在同一个页面中要使用多个CSS规则样式的时候用ID是满足不了的，因为id是同一个页面强制的只能使用一次的。这里用CSS来设置不同的标签使用同一个css规则样式，这里用类来完成相关的设置，具体代码如下：
<html>
<head>
<title>CSS选择器</title>
<style type="text/css">
.title{
color:red;
}
</style>
</head>
<body>
<h2 class="title">我是H2</h2>
<p class="title">我是P
</body>
</html>
可以看到如下图的样式，类使用.加类名来设置，详细使用方式如上代码所示。
6、这里我们来讨论类和ID结合使用的CSS样式，来完成制定的工作，具体的代码如下：
<html>
<head>
<title>CSS选择器</title>
<style type="text/css">
#drinks{
line-height:200%;
color:red;
}
.min{font-size:14px;}
.max{font-size:20px;}
</style>
</head>
<body>
<ul id="drinks">
<li class="min">啤酒</li>
<li class="min">可乐</li>
<li class="max">红茶</li>
<li class="max">绿茶</li>
</ul>
</body>
</html>
可以看到如下的执行效果。
