html - 如何引用兄弟列表项

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 作为第一个 ul 中所有 li 元素的选择器

如果这还不够(您写不同的页面)，请在相应的 ul 上使用一个类，并处理该类的子 li，例如 ul.my-class > li