纯CSS如何同时匹配多个class并为其子元素设置样式？

说实话，刚开始接手使用纯CSS玩转多个类选择器的项目时，我也是摸不着头脑。
最让我担心的是如何精确定位同时具有多个类的元素，然后为其子元素添加样式。

我记得一个特别典型的场景。
当时有一个营销业务页面，要求将所有标记为“新”和“有吸引力”的产品列表中的“添加到购物车”按钮更改为半透明效果。
HTML 结构或多或少是这样的：
<button class="add-to-cart">添加到购物车</button>
<button class="add-to-cart">添加到购物车</button>

直接使用.new或.new hot是不行的。
必须是两个类的 div。
这就是 .class_A.class_B 串联类选择器派上用场的地方。
我写了一个CSS：
css .product-sheet.new.hot .添加到购物车 { 不透明度：0.6 ；
这行代码的含义是：只有当父元素同时具有.new和.hot类时，底层的.add-to-cart按钮才会变得透明。
选项卡上只有 .new 的按钮将正常显示。

有趣的是，CSS选择器的优先级是相当有趣的。
像.class_A.class_B这样串联的类选择器的优先级实际上比单独的.class_A高，但比ID选择器低。
如果遇到样式冲突，可以添加父项标签名称以提高特异性，例如 div.product-card.new.hot.add-to-cart。

当时我也遇到了一个陷阱。
要求又变了。
要求是只要父元素有.new或者.hot，子元素就必须有样式。
目前，您需要使用逗号分隔选择器：
css .product-sheet.new .添加到购物车， .product-sheet.hot .add-to-cart { 字体粗细：粗体；
这次父元素是否具有这两个类并不重要。
只要存在匹配项，子元素就会显示为粗体。

还有一个细节需要注意。
默认情况下，子选择器中的空格表示任意级别的后代元素。
例如：
<button class="add-to-cart">深层子元素</button>

.parent .add-to-cart 仍然可以选择这个深层子元素。
如果只想选择直接子元素，则必须使用子组合符（大于号）：
css .parent > .添加到购物车 { /仅影响直系子女/
这个技巧在布局控制中特别有用，可以防止样式传播到不应该受到影响的图层。

事实上，在使用了很多之后，我发现纯CSS完全足以实现这种复杂的逻辑。
我已经有一个项目，客户坚持要用JS来修改。
最终兼容性测试花了两天时间。
然后我直接用CSS重写了，第二天就上线了。
当然，这类有趣的操作需要对CSS原理有透彻的了解，否则很容易写出看不懂的样式表。

块级注释：本文实际上包含了多类选择器的应用场景和注意事项。
通过真实案例和详细解释来解释概念，避免泛泛而谈。

CSS 中 :hover 和 :active 的常见问题与解决方法

说实话，伪类 :hover 和 :active 确实很烦人，尤其是在做交互细节时。
我之前接手了一个项目，一个定制的无线电控件。
鼠标一移到上面，它就疯狂地闪烁。
那场面就像是看鬼片一样。
后来发现是hover时改变了背景色，但没有考虑到会影响盒子模型，导致浏览器不断回流。

有趣的是，解决方案非常直观——添加不会改变盒子模型的颜色。
例如.radio-control:hover{background-color:f0f0f0;}，很简单，但确实有效。
然而，这实际上暴露了浏览器渲染机制的一个bug：CSS伪类触发的重绘和回流时序过于敏感。
记得当时查了资料，发现IE浏览器特别容易出现这种bug。
Chrome 相对较好，但也并非没有问题。

说到：active，我遇到过更好的。
在一个老项目中，点击时单选完全没有反应，甚至连旁边标签的:active样式也没有触发。
尝试了很久，发现窗体的嵌套层次太深了。
后来我改用 并给标签添加了 :active 样式，就成功了。
这让我想起一个细节：在学习Web标准时，老师强调标签和输入的关系是通过for属性来实现的。
现在看来，这确实是一个关键点。

我在滚动页面的 3 D 场景中遇到过一次画布级别问题。
当时，游戏画布覆盖了购物车按钮，阻止用户点击结账。
经过长时间调试，发现z-index设置不正确。
我快速将position:relative 和z-index:1 添加到画布，然后将z-index:2 添加到按钮。
说实话，当时我不太明白为什么canvas的默认级别这么高。
后来查MDN，发现canvas默认是position=static，而static的z-index是auto，所以很容易出问题。
这个细节提醒我，在做交互设计的时候，不能只关注CSS，还要考虑DOM结构。

现在回想起来，这些坑其实都是由于对浏览器渲染细节理解不够造成的。
比如：hover重绘问题其实和CSS的will-change属性有一定的关系，不过当时我没有详细讨论。
主动触发的问题就更奇怪了。
风格已经明确，但效果却看不到。
归根结底，其实是HTML结构造成的。
这些经历让我明白，做前端工作不能只懂理论，一定要有排错经验。

顺便说一句，还有关于画布级别问题的其他详细信息。
一位同事遇到了画布在滚动时会“穿透”其他元素的情况。
后来他发现他使用了transform:translateZ(0)技术，该技术将画布推到了其他元素的前面。
这个例子具体说明了，在使用z-index时，必须注意transform的影响，否则就会陷入困境。