能否按特定顺序定位CSS选择器？如何仅匹配指定类顺序的div？

嘿，这个问题问得挺有意思的！直接给结论：常规的CSS类选择器无法按HTML中类的声明顺序来区分这两个元素，不过有个局限性较强的替代方案，下面给你详细说清楚：

为什么常规类选择器做不到？ #

CSS里的复合类选择器（比如.one.two.three）的逻辑很简单：只要元素同时拥有one、two、three这三个类，不管你在HTML的class属性里把它们写成什么顺序，都会被匹配。

因为HTML的class属性本质上是一个无序的类名集合，浏览器在解析时只会检查元素是否包含指定的类，完全不关心这些类在属性里的排列顺序。所以你写的两个<div>：

<div class="one two three">
<div class="three two one">

都会被.one.two.three这个选择器选中。

那有没有办法精确匹配类的顺序？ #

有的，但只能用属性精确匹配选择器，语法是这样的：

[class="one two three"] {
  /* 你的样式规则 */
}

这个选择器会严格检查元素的class属性值是否和字符串完全一致——包括类的顺序、空格数量，甚至不能多其他类。所以它只会匹配第一个<div class="one two three">，第二个<div class="three two one">因为字符串顺序不同，会被排除在外。

注意这个方法的局限性： #

• 如果元素的class属性里多了其他类（比如<div class="one two three four">），这个选择器就会失效；
• 如果类之间的空格不是单个空格（比如多个连续空格），也会匹配失败，因为它是完全精确的字符串匹配。

所以只有当你能确保这三个类是元素的全部类，且class属性的字符串格式完全固定时，这个方法才适用。如果元素可能新增其他类，那CSS层面就没有原生方法能按类的声明顺序区分了，这种情况下可能需要借助JavaScript来判断classList的顺序。

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