所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。
1、标记选择器
一个HTML页面有很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。例如P选择器，就是用于声明页面中所有<p>标记的样式风格。
CSS代码声明了HTML页面中所有的<h1>标记，文字的颜色都采用红色，大小都为25px。
<style> h1{ color:red; font-size:25px; } </style>
每一个CSS选择器都包含了选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记，声明多种样式风格。
CSS语言对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。通常情况下可以直接利用CSS编辑器的语法提示功能避免，但某些时候还需要查阅CSS手册或者直接登录W3C的官方网站（http://www.w3.org/）来查阅CSS的详细规格说明。
2、类别选择器
类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。
当页面中同时出现3个<p>标记，并且希望它们的颜色各不相同，就可以通过设置不同的class选择器来实现。
<html> <head> <title>class选择器</title> <style type="text/css"> <!-- .one{ color:red; /*红色*/ font-size:18px; /* 文字大小*/ } .two{ color:green; font-size:20px; } .three{ color:cyan; font-size:22px; } --> </style> </head> <body> <p class="one">class选择器1</p> <p class="two">class选择器2</p> <p class="three">class选择器3</p> <h3 class="two">h3同样适用</h3> </body> </html>
很多时候页面中几乎所有的<p>标记都使用相同的样式风格，只有1~2个特殊的<p>标记需要使用不同的风格来突出，这时可以通过class选择器与标记选择器配合使用，大大提高了代码的编写效率。
<html> <head> <title>选择器与标记选择器</title> <style type="text/css"> <!-- p{ color:blue; /*标记选择器*/ font-size:18px; } .special{ /*类别选择器*/ color:red; font-size:23px; } --> </style> </head> <body> <p>class选择器与标记选择器1</p> <p>class选择器与标记选择器2</p> <p>class选择器与标记选择器3</p> <p class="special">class选择器与标记选择器4</p> <p>class选择器与标记选择器5</p> <p>class选择器与标记选择器6</p> </body> </html>
类别选择器还有一种很直观的使用方法，就是直接在标记声明后接类别名称，以此来区别该标记
h3.special用于特殊的控制，仅仅只适用于<h3 class="special">标记，而不会影响单独的.special选择器。
在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中
这在实际制作网站时往往会很有用，可以适当减少代码的长度。
在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中
这在实际制作网站时往往会很有用，可以适当减少代码的长度。
<html> <head> <title>标记选择器.class</title> <style type="text/css"> <!-- h3{ /*标记选择器*/ color:blue; font-size:18px; } h3.special{ /*标记.类别选择器*/ color:red; font-size:23px; } .special{ /*类别选择器*/ color:green; } .one{ /*类别选择器*/ color:blue; } .two{ /*类别选择器*/ font-size:22px; } --> </style> </head> <body> <h3>标记选择器.class1</h3> <h3>标记选择器.class2</h3> <h3 class="special">标记选择器.class3</h3> <h3>标记选择器.class4</h3> <h3>标记选择器.class5</h3> <p class="special">使用于别的标记</p> <h4>一种都不使用</h4> <h4 class="one">同时使用两种class，只使用第一种</h4> <h4 class="two">同时使用两种class，只使用第二种</h4> <h4 class="one two">同时使用两种class，同时使用</h4> <h4>一种都不使用</h4> </body> </html>
3、ID选择器
ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。
在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器。
<html> <head> <title>ID选择器</title> <style type="text/css"> <!-- #one{ font-weight:bold; } #two{ font-size:30px; color:#009900; } --> </style> </head> <body> <p id="one"> ID选择器1 </p> <p id="two"> ID选择器2 </p> <p id="two"> ID选择器3 </p> <p id="one two"> ID选择器4 </p> </body> </html>
在很多浏览器下，ID选择器也可以用于多个标记，但这里需要指出的是，将ID选择器用于多个标记是错误的，因为每个标记定义的id不只是CSS可以调用，JavaScript等其他脚本语言同样也可以调用。
如果一个HTML中有两个相同的id标记，那么将会导致JavaScript在查找id是出错，如函数getElementById()
网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记
ID选择器不支持想class选择器那样的多风格同时使用，类似id=“one two” 是完全错误的语法。