多个css类选择器使用规则
展开全文
类选择器在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>
css选择器分为哪几类
<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的标签， 被包含的标签背景颜为粉。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。