如何通过外部元素为li标签应用CSS？求正确的:has属性写法

你的样式不生效的核心原因是：<p>是<ol>的同级兄弟元素，并非<li>的兄弟，原选择器ol>li:has(+p)里的+p试图匹配li的下一个同级p，但实际结构里不存在这样的元素，所以无法生效。

正确写法示例 #

如果要给紧跟在p前面的ol中的最后一个li设置红色：

ol:has(+ p) > li:last-child {
  color: red;
}

如果要给紧跟在p前面的ol中的所有li设置红色：

ol:has(+ p) > li {
  color: red;
}

对应HTML结构 #

<ol>
  <li>abcd</li>
  <li>defg</li>
</ol>
<p>list color change</p>

原理说明：ol:has(+ p)先筛选出后面紧跟着p元素的ol，再通过子选择器> li选中这个ol下的目标li元素，这样就能精准匹配到你需要设置样式的元素了。

内容的提问来源于stack exchange，提问作者user24095963