我为两个不同的网页构建了一个通用的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>


我注意到的唯一可识别的区别是不同的data-filter-id字段。我需要在第一个列表中而不是第二个中引用span标签。

我写了这个CSS来解决第一个列表中的第一个li:

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


有没有办法在此CSS中引用同级li标签?
我可以编码:

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,


这是将类包含在li标签的css上的正确方法吗?

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

最佳答案

ul:first-of-type > li用作第一个li中所有ul项的选择器

如果这还不够(您要写不同的页面),请在相应的ul上使用一个类,并对该类的子级li进行寻址,例如ul.my-class > li

10-05 20:37
查看更多