如何引用同級列表項

我爲兩個不同的網頁構建一個通用的css用戶文件。我在兩個不同的頁面上有無序列表。在實際的html中，有很多無序列表深深地嵌套在div中，你有什麼。列表項的實際數量大於此處顯示的數量。我需要格式化與第二組不同的第一組列表項目。 ul編碼沒有什麼不同。有太多的CSS要考慮其他的差異。如何引用同級列表項

<-- list in first page --> 
<ul class="our-list"> 
<li class="group item" data-filter-id="draft">a little bit of <span>text</span></li> 
<li class="group item" data-filter-id="contentstatus[published]">other <span>text</span></li> 
<li class="group item" data-filter-id="participated">last of the <span>text</span></li> 
</ul> 

<-- list in second page --> 
<ul class="our-list"> 
<li class="group item" data-filter-id="One">a little <span>text</span></li> 
<li class="group item" data-filter-id="Two">the <span>text</span></li> 
<li class="group item" data-filter-id="Three">last <span>text</span></li> 
</ul>

我注意到的唯一可區別的區別是不同的數據過濾器ID字段。我需要在第一個列表中引用span標籤，而不是第二個。

我寫這個CSS來解決在第一列表中的第一李：

li[data-filter-id="draft"] span { 
     background-color: yellow !important; 
     }

是否有某種方式來引用兄弟李標籤這個CSS？我的代碼：

li[data-filter-id="draft"] span, 
li[data-filter-id="contentstatus\[published\]"] span, 
li[data-filter-id="participated"] span, { 
     background-color: yellow !important; 
     }

但有一些快捷方式，我可以代碼，必須列出所有相鄰列表中的項目？

這是正確的方式來逃避嵌入[]在CSS？

li[data-filter-id="contentstatus\[published\]"] span,

這是正確的方式來包括類標籤的css的類？

li.group.item[data-filter-id="draft"] span,

來源

2016-11-06 historystamp

這兩個頁面上的'ul'父元素和祖元素是否相同？所有你需要的是在第一頁中作爲祖先的一個唯一'id'（換句話說，'id'在頁面中是唯一的），那麼你可以使'ul'成爲'id'的後代，它只適用於到那個頁面。 –

我看着前面的八個級別和CSS標籤都是一樣的。有大約65k行html。第一頁是：<我的內容列表，你需要一個appleid才能看到>第二頁是https://discussions.apple.com/community/mac_os/mac_os_x_technologies/content我正在重新設置側欄的格式 – historystamp

我現在要跑，但如果可能的話，找到一個單獨的元素，該元素對於該頁面是獨一無二的，在DOM中更高。讓你的'ul'成爲後代，並且應該可以工作。我會稍後再回來看看。祝你好運。 –

使用ul:first-of-type > li作爲第一ul

內的所有物品li一個選擇。如果這還不夠（你寫不同的頁面），請使用根據ul類和解決兒童li例如ul.my-class > li

來源

2016-11-06 19:16:03 Johannes

但我不知道ul的獨特之處。班級信息與ul相同。 – historystamp

所以你不能改變HTML（即添加一個類）？在這種情況下，'body'tag可能具有唯一的ID或類（例如Wordpress自動執行）。然後你可以像'.page1 ul：first-of-type> li'一樣使用選擇器 – Johannes

如何引用同級列表項

回答

相關問題