如何用CSS组合器实现锚点元素的AND条件样式规则？

嘿，这个问题其实很好解决！你之前用逗号分隔选择器的写法是选择器分组，代表的是“或”（OR）逻辑——只要元素匹配其中任意一个选择器，样式就会生效。而要实现“与”（AND）逻辑，CSS里不需要特殊的组合器，只需要把多个条件对应的选择器直接连写在一起就可以了。

比如你需要的场景：选中同时满足href以http://www.开头、且target值为_blank的<a>元素，正确的写法应该是这样：

a[href^="http://www."][target="_blank"]::after {
  content: "->";
}

这个选择器的逻辑非常清晰：

• 首先匹配所有<a>标签
• 同时要求该标签的href属性值恰好以http://www.开头（^=是属性前缀匹配选择器）
• 并且要求该标签的target属性值恰好等于_blank

只有同时满足这三个条件（是的，<a>标签本身也是一个条件）的元素，才会应用::after的样式。

另外这种连写的方式还可以扩展到更多条件，比如如果还想给带有external类名的这类链接加样式，直接把类选择器也连上去就行：

a[href^="http://www."][target="_blank"].external::after {
  content: "-> (external)";
}

内容的提问来源于stack exchange，提问作者Water Cooler v2