zoukankan      html  css  js  c++  java
  • css笔记10:多个id选择器/类选择器包含相同部分问题的探讨

    有些时候,我们可以将多个class选择器或者id选择器,html选择器的共同部分提取出来,写在一起,这样的好处是是可以简化css文件

    1.首先我们先看一段代码.css,如下:

    @charset "utf-8";
    /* CSS Document */
    
    /*招生广告*/
    
    .ad_stu {
        width: 136px;
        height: 196px;
        background-color: #FC7E8C;
        margin: 5px 0 0 5px;
        float: left;
    }
    
    /*广告2*/
    .ad_2 {
        background: #7CF574;
        height: 196px;
        width: 457px;
        float: left;
        margin: 5px 0 0 6px;
    }
    
    /*房地产广告*/
    .ad_house {
        background: #7CF574;
        height: 196px;
        width: 152px;
        float: left;
        margin: 5px 0 0 6px;
    }
        

    不能发现.ad_stu 、.ad_2 和.ad_house 包含很多修饰部分是相同的,这样写感觉很浪费,很不简洁,难道不可以把他们相同的部分统筹到一起吗?

    答案当然是肯定的

    2.解决方案如下:

    @charset "utf-8";
    /* CSS Document */
    
    /*招生广告*/
    
    .ad_stu {
        width: 136px;
        background-color: #FC7E8C;
        margin: 5px 0 0 5px;
    }
    
    /*广告2*/
    .ad_2 {
        background: #7CF574;
        width: 457px;
        margin: 5px 0 0 6px;
    }
    
    /*房地产广告*/
    .ad_house {
        background: #7CF574;
        width: 152px;
        margin: 5px 0 0 6px;
    }
    
    
    /*共同的部分*/
    .ad_stu, .ad_2, .ad_house {
        height: 196px;
        float: left;
    }
        
  • 相关阅读:
    CH4302 Interval GCD
    20201017 模拟赛总结
    LOJ#2610. 「NOIP2013」货车运输
    POJ3696 The Luckiest number
    20200925 小练习总结
    更新一波状态
    AFO
    【扩展lucas定理】
    【LCT维护子树信息】uoj207 共价大爷游长沙
    [bzoj4589]Hard Nim(FWT快速沃尔什变化+快速幂)
  • 原文地址:https://www.cnblogs.com/hebao0514/p/4624091.html
Copyright © 2011-2022 走看看