css - 简化 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;
}

Answer 2

您可以使用 CSS nth-child 选择器..

p:nth-child(2) 
{
background:#ff0000;
}  

这是一个很棒的教程

http://css-tricks.com/how-nth-child-works/