Question

我有一个像

这样的元素列表

<ul id="Menus">
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
</ul>

和很少的CSS类，如

.classOne
{
   height:20px;
   background-color:#f00; 
   background-image:url('icons.png');
   background-repeat:no-repeat; //and many other style properties
}

.classTwo
{
   width:50px;
   border:1px solid #ccc; //and many other style properties
}

#Menus li
{
   display:inline-block;
   list-style:none;
}

现在我如何在#Menus li上应用.ClassOne和.ClassTwo？我知道我可以通过这段代码来做到这一点

 .classOne, #Menus li
 .classTwo, #Menus li

但除了上面的代码之外还有其他任何方法可以做到这一点，因为我有很多其他li和其他元素所以我将不得不继续添加？按照上面的代码，它会创建一个长列表，如

.classOne, #Menus li, #otherMenus li, #bgImages li, #etc li, #etc

然后如果有时候我必须改变某些东西那么就会产生问题。我只想在任何li元素上应用我的.classOne和.classTwo，而不是像上面那样添加。有没有css技巧？

Answer 1

听起来你想使用像SASS或LESS这样的CSS预处理器。它们允许您在css中重用代码段。

你在LESS中可能做的是：

.some-css
{
   width:50px;
   border:1px solid #ccc; //and many other style properties
}

#Menus li
{
   display:inline-block;
   list-style:none;
   .some-css;
}

#Menus li的风格将成为：

#Menus li
{
   display:inline-block;
   list-style:none;
   width:50px;
   border:1px solid #ccc;
}

Answer 2

您只需在ul元素上引入一个新类：

<ul id="Menus" class="newClass">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

<ul id="otherMenus" class="newClass">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

然后简单地说：

.classOne, .newClass li {
    ...
}

.classTwo, .newClass li {
    ...
}

Answer 3

您是否有理由不想直接在HTML li元素上添加所需的类？

例如：

<ul id="Menus">
   <li class="classOne classTwo">Home</li>
   <li class="classOne classTwo">About</li>
   <li class="classOne classTwo">Contact</li>
</ul>

将其他类添加到li元素

3 个答案: