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; 
    }

现在，ids将成为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/

简化CSS

2 个答案:

替代方法