在 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

在 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>

Answer 2

正如我在有問題的評論中所寫，您可以使用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>