Question

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

Answer 1

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

内所有ul项的选择器

如果这还不够（您撰写不同的网页），请使用相应的ul上的课程，并将该课程的子li作为ul.my-class > li < / p>

如何引用兄弟列表项

1 个答案: