CSS规则莫名其妙地没有被应用

Question

我有一个我正在修改的模板。它链接到一个样式表，下面的代码用来操作无序列表。

ul {
    float: left;
    margin: 0 40px 16px 0;
    padding: 0;
    list-style: none;
}

我有一个单独的样式表，其中包含以下内容：

.featured_list ul {float: none; list-style: circle; list-style-position: inside;}
.featured_list li {margin: 5px;}    

在我的HTML代码中，我像这样引用我的类

<ul class="featured_list">

任何人都可以告诉我为什么我的列表仍然设置为浮动左标记？谢谢你的帮助。

Answer 1

对于此标记

<ul class="featured_list">

你应该选择它作为

ul.featured_list {
styles here
}

Answer 2

你想要这个：

ul.featured_list

这是ul，类featured_list。您的选择器适用于{/ 1}} 包含在类别ul的元素中。

Answer 3

问题在于您将无序列表的选择器编写为：

.featured_list ul{float:none; list-style:circle; list-style-position:inside;}

这将尝试查找所有ul元素，这些元素是具有类featured_list的元素的子元素。除此之外，您可以直接使用类名将样式应用于列表：

.featured_list {float:none; list-style:circle; list-style-position:inside;}

<强> DEMO ：

Answer 4

如果你不能改变CSS文件，那么你想用.featured_list包裹ul：

<div class="featured_list">
    <ul>...</ul>
</div>

如果您可以更改样式表，则需要将样式更改为：

ul.featured_list {}