多个类选择器使用

类选择器在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的标签,颜色为粉色,字体大小20px。
class为b的标签,颜色为绿色,字体大小为默认值。(不是20px)
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名,则没有效果,说明在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>

运行结果如下:


.a.b中间没有空格,代表同时包含a 和 b样式。 而第一个div标签正是采用了两者,表现出来为字体变化。
.a .b中间有空格,代表a包含b。 而class 为a的div标签正好包含class为b的标签, 被包含的标签背景颜色为粉色。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、读书摘要:(用一段话概括这四章的内容) 基因通过复制,来制造 生合体;而生命体是基因的群体,通过基因的合作,来...
    静心513阅读 719评论 0赞 0
  • 颜色是所有设计系统中的一个关键要素。在网站或应用程序中,可以通过多种方式使用颜色。有时通过对比或将颜色限制在选定范...
    通通来习阅读 805评论 0赞 0
  • 互联网时代下、传统企业遇到了强大的电商传统企业打不过电商吗?一时间受到了惊吓,对未来充满恐惧。计划开店放缓脚步,或...
    京心达张新波阅读 191评论 0赞 0
  • 影响30万名教师认知实践科学亲子教育,成就更多的拥有幸福人生的人民教师! ——未来讲师阿真24/100天 孩子的入...
    未来讲师阿真阅读 964评论 1赞 3

友情链接更多精彩内容