类选择器在style中的写法: .类选择器名字 注意前面有个点 在body中的写法: class="类选择器名字" 通常为了减少代码量,使代码更简洁,机智的程序员们会选择调用已有的符合条件的样式,而若一个标签需要多个样式,或存在包含关系,则要考虑用多个类选择器。请看下面的几种情况: 一、 一个标签使用多个类选择器 <style type="text/css"> .a{ background:pink; font-size:20px; } .b{ background:green; } </style> </head> <body> <div class='a'>这是类选择器为a的div标签</div> <div class='b'>这是类选择器为b的div标签</div>
<div class='a b'>这是类选择器同时采用a和b的div标签</div> </body> 运行结果如下图所示: class为同时采用a和b的标签,颜色为后面的颜色绿色,如果两个选择器有相同的属性值, 则以最后一个属性值为准。字体大小为a中设定的值。
然而ID选择器则不能像类选择器一样一起使用,把class改为id,代码如下: <head> <style type="text/css"> #a{ background:pink; font-size:20px; } #b{ background:green; } </style> </head> <body> <div id='a'>这是id选择器为a的div标签</div> <div id='b'>这是id选择器为b的div标签</div> <div id='a b'>这是id选择器同时采用a和b的div标签</div>
</body> 运行结果如下图:
同时采用a和b标签,则没有效果,说明在id选择器中,不能像类选择器一样同时使用 二、两类选择器之间有无空格 <head> <style type="text/css"> .a.b{ font-size: 20px; } .a .b{ background:pink; } </style> </head> <body> <div class='a b'>这是类选择器同时采用a和b的div标签</div> <div class='a'>这是类选择器为a的div标签 <div class='b'>这是类选择器为a下类为b的div标签</div> </div> </body>
运行结果如下:
(1).a.b中间没有空格,代表同时包含a 和 b样式。 而第一个div标签正是采用了两者,表现出来为字体变化。 (2).a .b中间有空格,代表a包含b。 而class 为a的div标签正好包含class为b的标签, 被包含的标签背景颜色为粉色。
|