添加CSS花式列出的項目只有它有子

Question

我有一個像下面

<ul> 
    <li> 
    <a></a> 
    <ul> 
    <li> 
    <a></a> 
    </li> 
    </ul> 
    </li> 
</ul> 

名單，我需要添加使用箭頭：以後只要李娜內只使用CSS的UL標籤。我已經應用了以下css樣式，但問題沒有解決。

ul li ul:parent:after { 
    border: 5px solid transparent; 
    border-left: 8px solid #522; 
    width: 0; 
    height: 0; 
    content: ""; 
    display: inline-block; 
    transform: rotate(90deg); 
    margin-right: 5px; 
} 

是否有任何方法可以實現這個目標？我感謝您的幫助！

Answer 1

:parent選擇器在CSS中尚不存在。您可以使用jQuery中的:has()選擇器進行操作。

不過，我不認爲:after選擇是你在找什麼相當的任何，因爲它不會在li文本後到來，但整個元素後，

<ul> 
<li> 
    <a>Outer Item</a> 
    <ul> 
    <li> 
    <a>Inner Item</a> 
    </li> 
    </ul> 
</li> <-- :after would place arrow here 
</ul> 

與此類似：

o Outer Item 
    o Inner Item 
<-- 

您可以使用Javascript或jQuery在初始文本後面添加箭頭，但我認爲沒有辦法只用CSS來完成此操作。

你可以得到幾分親近這一點，但箭頭出現在父項和子列表之間的一條線：

li > a:first-child + ul:before { 
    border: 5px solid transparent; 
    border-left: 8px solid #522; 
    width: 0; 
    height: 0; 
    content: ""; 
    display: inline-block; 
    transform: rotate(90deg); 
    margin-right: 5px; 
} 

看到http://jsfiddle.net/29kc1p1x/