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.featured_list 

這是一個ul與類featured_list。您的選擇器適用於包含在中的ul元素，其類別爲featured_list。

Answer 2

對於這個標記

<ul class="featured_list"> 

你應該選擇它作爲

ul.featured_list { 
styles here 
} 

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文件，然後你想包裝與UL .featured_list：

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

如果你可以改變樣式表，那麼你需要的樣式更改爲：

ul.featured_list {}