Question

我正在尝试学习css，但遇到了我不了解的事情。

所以我在html中有这行代码：

<ul class="weblist">
    <li>Coffee Brur</li>
    <li>Taco Finder</li>
    <li>CSS Selector Finder</li>
    <li>HTML Formatter</li>
</ul>

css文件中的这一行：

.weblist ul {
  color: red;
}

我想知道为什么它什么也没做。从我得到的结果来看，应该将unordered列表的所有后代与weblist类一起使用，并为它们应用红色，但是它什么也没做。我希望它使该特定unordered列表的所有列表元素都显示为红色。

Answer 1

如果要更改文本的颜色，应将其应用于列表项。

.weblist li {
color: red;
}

编辑：在这种情况下，它可以工作，但是将另一个div包裹在列表中的另一种解决方案也许是更好的解决方案：）

Answer 2

使用以下CSS

ul.weblist{
  color: red;
}

Answer 3

.weblist ul意味着您的ul嵌套在具有weblist类的元素中。因此，要使CSS正常工作，您需要编写以下HTML

您的CSS：

.weblist ul {
      color: red;
    }

和HTML

<div class="weblist">
     <ul>
        <li>Coffee Brur</li>
        <li>Taco Finder</li>
        <li>CSS Selector Finder</li>
        <li>HTML Formatter</li>
      </ul>
    </div>

Answer 4

.weblist ul意味着将应用于ul类元素内的.weblist元素（在我的示例中为test）

.weblist ul {
  color: red;
}

ul.weblist { /* <- This is what you want */
  color: blue;
}

<ul class="weblist">
    <li>Coffee Brur</li>
    <li>Taco Finder</li>
    <li>CSS Selector Finder</li>
    <li>HTML Formatter</li>
    <li>
      <ul>
        <!-- here you have a <ul> inside weblist class element -->
        test
      </ul>
    </li>
  </ul>
And this line in css file:

.class元素，为什么它什么都不做？

4 个答案: