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

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

使用以下 css

ul.weblist{
color: red;
}

Answer 2

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

.weblist li {
color: red;
}

编辑：在这种情况下，它可以工作，但是在您的列表中包装另一个div的另一种解决方案可能是更好的解决方案:)

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的意思是应用于.weblist类元素内的ul元素(在我的示例中，它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: