CSS的基本选择器
前面介绍了CSS是一种把网页内容和样式分离的技术，如果使用行内CSS设置文字为红色，可以使用<span style="color:red;">红色文字</span> ，
效果为红色文字，这里直接设置了<span></span>标记之间文字的颜色，哪部分要改变颜色很明确。
如果使用“内嵌式”、“链接式”或“导入式”样式表，把样式统一放置在一起或单独写入到一个文件中，怎样表示哪部分文字要设置颜色呢？这就需要用到选择器。
前面在“内嵌式”样式示例中使用了span{color: red; } 的方式，前面的span就是一种选择器，称为标记选择器（或标签选择器），因为<span></span>是一种HTML标记， 可以把一段文字放入其中，然后设置样式，就能为所有<span></span>中的文字设置统一的样式，不用为每一个单独进行设置，非常方便，也减少了代码节省了存储空间。
HTML的其他标记，像前面介绍过的常见标记，如<p></p>、<a></a>、<div></div>、<ul></ul>、<li></li>等都可以这样使用； 不仅闭合式标记可以使用标记选择器，非闭合式标记，如<img/>也可以使用，但其中没有文字，就不能设置文字样式了，但有其他一些样式，以后会介绍。 一些本身就表示样式的标记，如<strong></strong>、<em></em>、<big></big>、<small></small>、<h1></h1>等也可以通过标记选择器重新设置样式， 这会覆盖浏览器内置的默认样式，当然一般很少这样使用，因为没有必要，也可能造成混乱。
其实对<body></body>、<html></html>标记同样可以使用标记选择器设置统一样式，这会对整个页面造成影响，使用时要谨慎。甚至可以使用星号*作为所有标记的替代符，对所有标记来设置样式。
但使用标记选择器设置样式，会对所有这种标记造成影响，如上面对<span></span>标记设置了文本颜色，一个网页中所有<span></span>标记中的文字都很变成红色。 实用中往往只需要让部分<span></span>标记中的文字变为红色，而另一部分可能需要变为绿色，这时就要分类，使用类选择器。
为了分类，需要为一类的标记设定一个class属性，样式为<span class="class1">类别1</span>，而另一部分可以设置<span class="class2">类别2</span>，类名可以自己选取，但要容易理解， 因为样式与内容是分离的，不容易了解其含义的类名会在设置样式时造成麻烦。然后在样式表中可以设置：
<style type="text/css">
.class1{
color: red;
}
.class2{
color: green;
}
</style>
这样class1类名中的文字就被设置为红色，而class2类名中的文字就被设置为绿色。注意，类选择器前面要加点“.”，表示这是一个类名，而标记选择器前面是不加其他字符的。 为标记加类名属性是经常使用到的方法，这可以将很多一类的内容赋予同一种样式，甚至可以为不同标记设定同一个类名，如span和h1标记设置同样的类名，非常灵活方便。
还有一种是ID选择器，为标记加入id属性值，样式为<span id="name1">ID为name1的部分</span>。id的属性值在一个网页中必须唯一的，不能有重复， 很多对网页的操作都会使用id属性，如果重复可能造成混乱。而在样式表中则使用：
<style type="text/css">
#name1{
color: red;
}
</style>
可以看到，id选择器前面要使用井号“#”，表示这是一个ID选择器。
上面三种选择器是最基本、最常用的选择器，在此基础上衍生出其他一些选择器。
前面在“内嵌式”样式示例中使用了span{color: red; } 的方式，前面的span就是一种选择器，称为标记选择器（或标签选择器），因为<span></span>是一种HTML标记， 可以把一段文字放入其中，然后设置样式，就能为所有<span></span>中的文字设置统一的样式，不用为每一个单独进行设置，非常方便，也减少了代码节省了存储空间。
HTML的其他标记，像前面介绍过的常见标记，如<p></p>、<a></a>、<div></div>、<ul></ul>、<li></li>等都可以这样使用； 不仅闭合式标记可以使用标记选择器，非闭合式标记，如<img/>也可以使用，但其中没有文字，就不能设置文字样式了，但有其他一些样式，以后会介绍。 一些本身就表示样式的标记，如<strong></strong>、<em></em>、<big></big>、<small></small>、<h1></h1>等也可以通过标记选择器重新设置样式， 这会覆盖浏览器内置的默认样式，当然一般很少这样使用，因为没有必要，也可能造成混乱。
其实对<body></body>、<html></html>标记同样可以使用标记选择器设置统一样式，这会对整个页面造成影响，使用时要谨慎。甚至可以使用星号*作为所有标记的替代符，对所有标记来设置样式。
但使用标记选择器设置样式，会对所有这种标记造成影响，如上面对<span></span>标记设置了文本颜色，一个网页中所有<span></span>标记中的文字都很变成红色。 实用中往往只需要让部分<span></span>标记中的文字变为红色，而另一部分可能需要变为绿色，这时就要分类，使用类选择器。
为了分类，需要为一类的标记设定一个class属性，样式为<span class="class1">类别1</span>，而另一部分可以设置<span class="class2">类别2</span>，类名可以自己选取，但要容易理解， 因为样式与内容是分离的，不容易了解其含义的类名会在设置样式时造成麻烦。然后在样式表中可以设置：
<style type="text/css">
.class1{
color: red;
}
.class2{
color: green;
}
</style>
这样class1类名中的文字就被设置为红色，而class2类名中的文字就被设置为绿色。注意，类选择器前面要加点“.”，表示这是一个类名，而标记选择器前面是不加其他字符的。 为标记加类名属性是经常使用到的方法，这可以将很多一类的内容赋予同一种样式，甚至可以为不同标记设定同一个类名，如span和h1标记设置同样的类名，非常灵活方便。
还有一种是ID选择器，为标记加入id属性值，样式为<span id="name1">ID为name1的部分</span>。id的属性值在一个网页中必须唯一的，不能有重复， 很多对网页的操作都会使用id属性，如果重复可能造成混乱。而在样式表中则使用：
<style type="text/css">
#name1{
color: red;
}
</style>
可以看到，id选择器前面要使用井号“#”，表示这是一个ID选择器。
上面三种选择器是最基本、最常用的选择器，在此基础上衍生出其他一些选择器。