list-style-type：列表項是鏈接時沒有，列表項不是鏈接時顯示項目符號？ CSS

Question

如果我在頁面上有幾個項目符號，一些列表包含普通文本（沒有段落元素），有些列表包含鏈接，有可能在鏈接上沒有項目符號，但文本項目上有項目符號？

要刪除我做的所有子彈：

#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li , 
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li, 
#WebPartWPQ6 li {margin-left: -25px; list-style-type: none} 

但是，如果該項目是一個鏈接我要顯示的子彈。我嘗試過：

#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li , 
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li, 
#WebPartWPQ6 li {margin-left: -25px;} 

#WebPartWPQ1 li a ,#WebPartWPQ2 li a ,#WebPartWPQ3 li a , 
#WebPartWPQ4 li a,#WebPartWPQ5 li a,#WebPartWPQ6 li a, 
#WebPartWPQ6 li a {margin-left: -25px; li ast-style-type: none} 

沒有成功，有什麼想法嗎？

Answer 1

你將不得不求助於服務器端預處理或Javascript。 CSS沒有辦法根據子元素的樣式來設計元素，或者從子元素的樣式聲明中更改父級的樣式。這裏是W3 CSS2 Selector Reference和CSS3 working draft Selector reference，他們都沒有提到父母選擇器。

Answer 2

雖然你不能改變基於列表元素的造型任何元素（一個或多個）它包含有是實現或多或少相同結果的純CSS解決方法：

1. 設置block作爲顯示所有列表元素的屬性
2. 將list-item設置爲鏈接元素的顯示屬性以及list-style-position和list-style-type的有效值。

因此，當您的列表項目包含鏈接時，不要讓列表項目看起來像列表項目，而只是讓列表項目中的鏈接表現得像列表項目一樣。

你的子彈將與你的鏈接具有相同的顏色，但這是關於這種方法和你想到的方法（這是不可能的）之間的唯一區別。

示例代碼：

#WebPartWPQ1 li { 
 
    margin-left: -25px; 
 
    display: block; 
 
} 
 

 
#WebPartWPQ1 li a { 
 
    display: list-item; 
 
    list-style-position: inside; 
 
    list-style-type: disk; 
 
}

<ul id="WebPartWPQ1"> 
 
    <li>Item 1 (ordinary item)</li> 
 
    <li><span>Item 2 (wrapped in a "span" tag)</span></li> 
 
    <li><a href="#">Item 2 (wrapped in an "a" tag)</a></li> 
 
</ul>

---

小提琴：

http://jsfiddle.net/6kt8jhfo/5/