如何为H2元素的:after伪元素正确应用:not()选择器？

你之前的写法错在把:not()加在了伪元素::after上，但.h2lines类是绑定在<h2>标签本身的，伪元素并不具备这个类，所以::after:not(.h2lines)相当于筛选掉所有不存在的伪元素类，结果就是所有H2的下划线都被移除了。

给你两种可行的解决方案：

方案一：先全局设置，再覆盖特定类 #

先保留原来的全局下划线样式，再针对带.h2lines类的H2，取消它的伪元素样式：

/* 全局给.post下的H2加下划线 */
.post h2:after {
    content: '';
    display: block;
    border: .5px dashed;
}

/* 取消带.h2lines类的H2的下划线 */
.post h2.h2lines:after {
    display: none; /* 直接隐藏伪元素 */
    /* 也可以用 border: none; 或者 content: none; 达到相同效果 */
}

方案二：直接用:not()筛选父元素 #

一开始就只给不带.h2lines类的H2添加伪元素下划线，这样带类的H2自然不会有下划线：

.post h2:not(.h2lines):after {
    content: '';
    display: block;
    border: .5px dashed;
}

另外注意你示例里的类名拼写：一会儿是.h2lines，一会儿是.h2line，实际使用时要保证类名完全一致，不然样式不会生效。

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