如何向这个 css 添加颜色类答案

【问题标题】：How to add colour classes to this css如何向这个 css 添加颜色类
【发布时间】：2014-04-11 03:03:09
【问题描述】：

我基本上是想在下面的内容中添加颜色类。我将添加更多颜色，所以这种方式在清洁时显然对我不起作用。我尝试在下面的课程中添加以添加到我的 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>

【问题讨论】：

您的第一个样式的选择器将选择您的li 的后代，其类为orange，这是您想要的吗？还是您希望 li 具有背景颜色？
@Chris Hardie - 对不起，应该更清楚。我在虚线上方添加了规则只是为了显示我尝试过的内容。测试时它不在我的css中。

标签： html css class html-lists

【解决方案1】：

删除.orange

应该是 #content ul.icon-text li

【讨论】：

【解决方案2】：

如果我理解正确，您正在尝试创建 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>

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

祝你好运，如果不是，请告诉我，以便我删除它:)...

【讨论】：

我想在不同的页面上为相同的 ul 添加自定义颜色。我在我的网站上为不同的元素工作，但特别需要它来处理这个 ul。我在示例中添加了规则（在虚线上方），以与您的 css 相同的方式工作，但它再次对我没有任何作用。我猜这比我想的要简单得多......
如果您从上面的代码中取出 .orange ，它将将该颜色添加到站点中具有“icon-text”类的所有
元素，或者您可以添加“icon-text orange” “我的代码和你的代码的组合。因此，它只会将橙色添加到该 1 个 UL 列表中

@Compton 我刚刚添加了一种我刚刚向您描述过的方式

你能解释一下你在“也可能”下得到了什么吗？我尝试过这样的事情，但我从来没有以这种方式调用 css，所以我肯定在某个地方搞砸了。

再说一次，我很不擅长解释自己。我的意思是解释类如何协同工作。我从来没有像你上面那样使用过两个类。不过我已经想通了。谢谢你教我一些东西。完美运行，这正是我想要的。谢谢老大。

【解决方案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

【讨论】：

抱歉，我遗漏了一些 html，包括内容 div。我认为这会比现在更直接。我也倾向于让事情变得比他们需要的更混乱。本质上，我希望为 ul 添加颜色，而不是 li。我也在其他地方使用这样的颜色类，我需要这些特定于这个 ul。