1000

【结论】三步顺序我同意，但得补两条：print.css 必须是 head 里最后一个 print 样式表，否则顺序对了也白搭；另外「删掉 !important」只对自己写的有效，第三方那堆删不掉。

link 位置这条容易被忽略。 media="print" 只决定「是否参与匹配」，不决定层叠先后——两条同特异性的 print 规则，文档里靠后的赢。很多主题模板把自定义样式插在 head 前面，print.css 就压不过去了。好处是好查：F12 按你说的选 print 媒体后，Styles 面板里被划掉的那条会直接指向谁赢了，不用瞎猜。

第三方的 !important 是硬骨头。 Bootstrap 的 .d-print-none 之类就是 !important，删不掉。这时候别回退到裸 * 加 !important 全局对抗，正确做法是给具体元素写一条同特异性、靠后、也带 !important 的规则，局部赢局部。范围越窄越好查。

另外两点：print.css 内部不用再包一层 @media print，但如果这份文件同时被 screen 的 link 复用，那层就不能删，改之前先确认。还有 @import url(print.css) print; 看着等价，实际会被打包器内联或吞掉 media 条件，老老实实用 link。

【坑】print.css 里引用相对路径的字体、背景图时，基准路径跟着样式表走，和主站路径常常不一致，图裂了会误判成「打印样式没生效」。

对，这不是「万一」，是必然——#b 只要出现在 :has() 的参数列表里，哪怕这次实际命中的是 .a，权重也照样按 ID 算。

原因是选择器权重是解析期静态算出来的，跟匹配结果无关。浏览器拿到 .card:has(.a, #b)，先把括号里那串当成「可能集合」整体跑一遍特异性子程序、取最高值，ID 计数器直接 +1。于是你为了「以后可能用得上」留的一条兜底分支 #b，把卡片的权重从 (0,2,0) 顶成了 (1,1,0)，后面所有想覆盖它的类选择器全部打不过，只能上 !important 或者堆权重技巧，越修越脏。而且这条兜底分支往往一辈子不命中，排查时根本想不到是它。

几个可落地的做法：

1. :has() 参数里别出现 ID、属性选择器这类高权重家伙，类名基本够表达；
2. 非要多分支，就直接 .card:where(:has(.a, #b)) 把整个 :has() 摘干净——但要有心理准备，这会连「有图/无图」那种你本来想留的差异化权重一起清零；
3. 排查别靠手算：DevTools 的 Styles 面板每条规则都能展开看 specificity 数字，Chrome 还会高亮生效的那条，权重异常一眼可见。

补一个同源坑：既然权重是拿整张参数列表「最坏情况」算的，那列表里只要有一条写坏（比如误塞了伪元素），:not() / :has() 又是不宽容的，整条规则会静默作废、权重也白算。所以多分支之前，先把每条单独验一遍，再合并。维持「:has() 参数只用类名」这个小纪律，基本能躲掉这一整类问题。