Question

我基本上想要在下面添加颜色类。我将添加更多颜色，所以这种方式显然不适合我干净。我尝试在下面的课程中添加添加到我的li，但似乎不起作用。 css和html低于它。

#content ul.icon-text li .orange {
    background-color:#f37028;
}

-------------------------------

#content ul.icon-text {
    width:100%;
    height:2.1vw;
    list-style:none;
    float:left;
    padding: 0;
    margin: 1% 0 0 0;
    background-color:#f37028;
    text-transform:uppercase;
    text-align:center;
}

<ul class="icon-text">
<li>...</li>
</ul>

Answer 1

如果我理解正确您正在尝试创建COLOR类

.orange {
    background-color:#f37028;
}
.silver {
    background-color:#ccc;
}

依旧......

<ul class="icon-text">
  <li class="silver">...</li>
  <li class="orange">...</li>
</ul>

也可能

<ul class="icon-text orange">
  <li>...</li>
  <li>...</li>
</ul>

我不确定这是不是你要问的......

祝你好运，请告诉我，如果不是这样我可以删除它：）...

Answer 2

删除.orange

应该是 #content ul.icon-text li

Answer 3

您定义了.orange类，但未在HTML代码中使用它。

#content ul.icon-text li.orange {
    background-color:#f37028;
}

根据您在此处提供的HTML代码，应使用此行代码。

ul.icon-text li {
    background-color:#f37028;
  display:block;
  margin:4px;
}

如果您希望每个<li>都是橙色，那么您可以定义课程.orange并应用于特定的li。

工作演示链接。 http://jsbin.com/xagevava/1/edit

Answer 4

Working Fiddle

由于你的css正在使用#content是父，你的html结构也应该包含#content来查看li的橙色背景。

<div id="content">
<ul class="icon-text">
<li class="orange">...</li>
</ul>
</div>

如何为此CSS添加颜色类

4 个答案: