格式李

我有列表這樣的：格式李

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

其中兩個類型listelements都在那裏以任意順序多次。是否有辦法以不同的方式格式化這些李時珍？（不同的列表樣式圖像）的唯一區別是，一種包含一個鏈接，另一個犯規。

來源

2010-02-15 Flo

不，CSS中沒有辦法根據子元素指定選擇器。

您將不得不添加一些東西來區分li元素本身，如包含鏈接的所有li元素上的類。

如果你可以使用jQuery，你可以在類添加到li元素包含錨標籤：

$('li:has(a)').addClass('linkItem');

非jQuery的解決辦法是這樣的：

var items = document.getElementsByTagName('LI'); 
for (var i=0; i<items.length; i++) { 
    if (items[i].getElementsByTagName('A').length > 0) { 
    items[i].className = 'linkItem'; 
    } 
}

來源

2010-02-15 14:08:47 Guffa

我也想到了這一點，我認爲它是最好的解決方案之一（如果theres沒有在CSS中），但可悲的是，並非所有的瀏覽器支持jQuery我希望找到一個更好的解決方案 – Flo

@Flo你瞄準什麼瀏覽器不'支持jQuery？每個主流桌面瀏覽器都支持它，甚至還有一些移動瀏覽器。 –

@Flo：我還添加了一個非jQuery解決方案。 – Guffa

肯定。如果你給每個不同的課程，你可以簡單的做。或者，如果你不能使用課程，你總是可以做到這一點。

ul li 
{ 
    styles.... 
} 
ul li a 
{ 
    styles.... 
}

在第一類中的樣式將適用於所有li元素和樣式在第二類將分別>標記應用到<。

來源

2010-02-15 14:05:47

內容從CMS來，所以我儘量避免在HTML代碼的變化，以獲得更好的可用性。我知道第二種可能性，但我只改變了一個標籤，所以李元素將基本相同。所以如果我想改變列表樣式圖像，我將不得不給「a」標籤一個背景圖像。這將是非常骯髒 – Flo

@Flo - 如果你不能改變**正確**的事情，那麼髒是你唯一的選擇。 –

我一直都有一個問題。是怎麼回事： UI李{...} 從 UI不同>李{...} – Matt

你可以不要單獨使用CSS來完成這項工作，你可以使用Javascript來完成這個任務。下面是使用jQuery一個例子：

$('ul li a').each(function() { 
    $(this).parent().css('list-style-image', 'url("/path/image.gif")'); 
});

這將設置樣式爲李標籤，而不是一個標籤。從技術上講，list-style-image屬性應該設置爲ul標籤，而不是li，但大多數（所有？）瀏覽器都會按照您希望單獨設置li標籤的方式來處理它。

來源

2010-02-15 14:12:56 wsanville

你好

我想補充一個<p></p>標籤是這樣的：

<ul> 
<li><a...>...</a></li> 
<li><p></p></li> 
</ul>

，然後應用2點不同的風格是這樣的：

ul a {display:block; padding:3em; background: #ccc;} 
ul p {display:block; padding:3em; background: #aaa;}

我不建議使用JavaScript爲此，有些人阻止了javascript ect。但這取決於。我會認爲css/html。

編輯： 出於某種原因，你可以寫<p></p>沒有使它碼 - 修正

而且我可能會忽略你想申請列表樣式圖像，那麼這將無法工作。

來源

2010-02-15 14:36:20

這是什麼類的用途。在HTML：

<ul> 
<li class="linked"><a...>...</a></li> 
<li>...</li> 
</ul>

和CSS

ul li {...} 
ul li.linked {...}

來源

2010-02-15 16:48:17 graphicdivine

回答

相關問題