连接css中的伪选择器

Question

我有一个问题不知道该怎么解决。

如果我有，两个不同的列表ul和ol，并且我希望在第一个列表的第一个元素处应用样式，而不使用ol标记或js，只有我希望使用css：

<div>
<h1>Title</h1><ul>
<li>element_1</li>
<li>element_2</li>
<li>element_3</li>
<li>element_4</li>
<li>element_5</li>
</ul>
<ol>
<li>element_1</li>
<li>element_2</li>
<li>element_3</li>
<li>element_4</li>
<li>element_5</li>
</ol>
</div>

我用测试

div :has(li):nth-child(1) li {
/* styles */
}

但我无法通过这种方式访问元素。是否可以仅使用css进行解析？

谢谢，我找不到任何东西来修复它

Answer 1

正如我在有问题的评论中所写的那样，您可以使用h1 + * li:first-child。它非常依赖于HTML标记。

使用:has选择器，您可以使用类似的东西。。。

div :has(li) li:first-child {color: red;}
div :has(li) ~ :has(li) li:first-child {color: inherit;} /* return color from red for 2nd and next lists */

<div>
<h1>Title</h1><ul>
<li>element_1</li>
<li>element_2</li>
<li>element_3</li>
<li>element_4</li>
<li>element_5</li>
</ul>
<ol>
<li>element_1</li>
<li>element_2</li>
<li>element_3</li>
<li>element_4</li>
<li>element_5</li>
</ol>
</div>

Answer 2

在CSS中不使用严格的ol或ul的唯一可能方法是使用元素+元素选择器+并使用*作为替换。

h1 + * > li:first-child {
background: yellow;
}

<div>
<h1>Title</h1>
<ul>
<li>element_1</li>
<li>element_2</li>
<li>element_3</li>
<li>element_4</li>
<li>element_5</li>
</ul>
<ol>
<li>element_1</li>
<li>element_2</li>
<li>element_3</li>
<li>element_4</li>
<li>element_5</li>
</ol>
</div>