如何使用CSS选择器获取指定.cat-row元素后的所有.list-rows元素？

嘿，我懂你的困扰——div.cat-row + .list-rows这个选择器只能搞定紧跟在.cat-row后面的第一个.list-rows元素，但你要的是它之后所有的同级.list-rows，对吧？这里有两个靠谱的解决办法：

1. 使用CSS通用兄弟选择器 ~ #

这是最直接的方案，通用兄弟选择器会匹配目标元素之后所有同级的符合条件的元素，正好满足你的需求。

对应的选择器写法：

div.cat-row ~ .list-rows {
  /* 这里写你的样式规则，比如： */
  border-left: 2px solid #2196F3;
  padding-left: 8px;
}

这个选择器的逻辑是：找到所有和div.cat-row同级，并且在它之后出现的.list-rows元素，不管中间隔了多少其他元素（在你的HTML结构里，后面都是.list-rows，完全适用）。

2. 更精确的匹配（针对多.cat-row场景） #

如果页面里有多个.cat-row元素，你需要精准定位到包含<span>Topics</span>的那个，再选它后面的.list-rows，可以结合:has()和:contains()伪类（现代浏览器均支持）：

div.cat-row:has(span:contains('Topics')) ~ .list-rows {
  /* 你的样式 */
}

这个写法会先筛选出内部包含文本为Topics的<span>的.cat-row，再选中它之后所有的.list-rows，避免误选其他.cat-row后面的元素。

为什么原来的选择器无效？ #

你之前用的+是相邻兄弟选择器，它的作用范围非常窄——只能选中紧跟在前面元素之后的第一个同级匹配元素，所以只能选中.cat-row后面的第一个.list-rows，后面的就覆盖不到了。

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