在上一节中提到的标记选择器一旦声明，那么页面中所有的该标记都会相应地产生变化。例如当声明了<p>标记不是红色，而是蓝色，这时仅依靠标记选择器是远远不够的，还需要引入类别选择器。
类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。如下所示：
| <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> |
其显示效果可以看到3个<p>标记分别呈现出不同的颜色以及字体大小。而且任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性声明即可。上例中<h3>标记同样适用了.two这个类别。仔细观测还会发现，最后一行<h3>标记显示效果为粗体字,而且也使用了.two选择器的第2个<p>标记却没有变成粗体。这是因为在.two类别中没有定义字体的粗细属性，因此各个HTML标记都采用了其自身默认的显示方式，<p>默认为正常粗细，而<h3>默认为粗体字。
很多时候页面中几乎所有的<p>标记都使用相同的样式风格，只有1-2个特殊的<p>标记需要使用不同的风格来突出，这时可以通过class选择器与上一节提到的标记选择器配合使用，如
| <html> <head> <title>class选择器与标记选择器</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> 在上例中首先通过标记选择器定义<p>标记的全局显示方案，然后再通过一个class选择器对需要突出的<p>标记进行单独设置，这样大大提高了代码的编写效率。 另外类别选择器还有一种很直观的使用方法，就是直接在标记声明后接类别名称，以此来区别该标记。 <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; } --> </style> </head> <body> <h3>标记选择器.class1</h3> <h3>标记选择器.class2</h3> <h3 class="special">标记选择器.class3</h3> <h3>标记选择器.class4</h3> <h3>标记选择器.class5</h3> <p class="special">使用于别的标记</p> </body> </html> |
上例定义了<h3>标记的风格样式，同时单独定义了h3.special,用于特殊的控制，而在这个h3.special中定义的风格样式仅仅适用于<h3 class="special">标记，而不会影响单独的.special选择器，如最后一行的<p>标记。
在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将链各个类别的样式风格同时运用一个标记中。这在实际制作网站时往往会很有用，可以适当减少代码的长度。
| <html> <head> <title>同时使用两个class</title> <style type="text/css"> <!-- .one{ color:blue; /* 颜色 */ } .two{ font-size:22px; /* 字体大小 */ } --> </style> </head> <body> <h4>一种都不使用</h4> <h4 class="one">同时使用两种class，只使用第一种</h4> <h4 class="two">同时使用两种class，只使用第二种</h4> <h4 class="one two">同时使用两种class，同时使用</h4> <h4>一种都不使用</h4> </body> </html> |
上例显示的效果可以看到使用第一种class的第二行显示为蓝色，而第三行则仍为黑色，但由于使用了.two，字体变大。第四行通过"class=one two" 将两个样式同时加入得到蓝色大字体。第一行和第五行没有使用任何样式
宁波智森网络公司版权所有，转载请注明来自宁波网站建设网,http://www.nbseoer.com。 (您可能还想了解：宁波网站推广|宁波网站设计|宁波SEO)
