html
1 <p class="urgent warning">This is urgent warning.</p>2 <p>Well,<span class="warning">This is warning.</span>What else?</p>
css
1 .warning{font-weight:bold;}2 .urgent{font-style:italic;}3 .warning.urgent{background:silver;}效果
立即学习“前端免费学习笔记（深入）”；
说明
由以上可知，一个class值内包含一个词列表时，该类就成了多类选择器。css中对类（.warning）定义属性时，如果类名存在于多类的词列表(.urgent warning)中，多类也会被定义。而.warning.urgent的写法限定了class值内既要有warning，又要有urgent，所以该定义对第二行（.warning）并无作用。
在兼容性方面，多类选择器在IE7以上的版本中不能被正确的处理。
html
1 <div class="red">flag</div>2 <div class="red">circle</div>
css
1 .red{2 width:70px;3 height:70px;4 background:red;5 margin:10px;6 color:white;7 text-align:center;8 line-height:70px;9 }效果
立即学习“前端免费学习笔记（深入）”；
需求
将circle变成红色的圆。
说明
如果将circle的class改为一个新的class(.circle), 然后将相同样式并在一起（.red,.circle），再单独写一个.circle{border-radius:35px}不失为一种解决办法。
而如果运用多类选择器，给circle的class值内加一个circle（.red circle），然后单独写一个.red.circle{border-radius:35px}同样可以解决问题。
两相比较，在这种情况下，使用多类选择器更为快捷，省去了不必要的代码冗余，并且更有利于扩展。
参考资料：
CSS类选择器详解
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号
242
