简化CSS

Question

我有一些CSS属性应用于很多ID.我需要简化我的代码,因为有大约20个ID!这是我的CSS:

 #a1_build ul,#a2_build ul,#a1_build li,#a2_build li,
 #a1_apply ul,#a2_apply ul,#a1_apply li,#a2_apply li,
 #a1_learn ul,#a2_learn ul,#a1_learn li,#a2_learn li
 {
    margin:0;
    padding:0;
    list-style:none;
    }
#a1_build ,#a2_build,
#a1_apply ,#a2_apply,
#a1_learn ,#a2_learn
       {
         margin-top:1em;
       }

#a1_build li,#a2_build li,#a1_apply li,#a2_apply li,
#a1_learn li,#a2_learn li
 { 
    width:696px;
    height:500px;
    overflow:hidden; 
    }

现在,id将是a1_build,a2_build .... a10_build,a1_apply,a2_apply ...... a10_apply和a1_learn,a2_learn ..... a10_learn.我希望能够将它概括为'a'+ n +'_ build','a'+ n +'_ apply'和'a'+ n +'_ learn'并使n从1-10开始,这将使它成为一个整体更轻松!我怎样才能做到这一点？

Answer 1

是的,你可以使用字符串选择器的匹配结束,[a$=b]特定属性的结束.这适用于IE7及更高版本.

的jsfiddle

[id$=build] ul,
[id$=apply] ul,
[id$=learn] ul {
    margin:0;
    padding:0;
    list-style:none;
}
[id$=build],
[id$=apply],
[id$=learn] {
    margin-top:1em;
}

[id$=build] li,
[id$=apply] li,
[id$=learn] li { 
    width:696px;
    height:500px;
    overflow:hidden; 
}

替代方法

我建议不要这样做并使用更基于类的方法,如下所示:

的jsfiddle

HTML

<div id="a1" class="a_section">
    <ul class="build">
        <li>item</li>
    </ul>
</div>

CSS

.a_section .build {
    margin:0;
    padding:0;
    list-style:none;
}