css后代选择器污染 |css3翻转效果怎么实现

.parent {
color: red;
}
.parent .child {
color: blue;
}

在上面的代码中，大家给父元素设置了红色的文本颜色，同时给子元素设置了蓝色的文本颜色。看起来很完美，但实际上却存在一个问题。

假设大家有一个元素结构如下：

Text

大家会发现，子元素的文本颜色确实被成功地设置为了蓝色，但父元素的文本颜色却同样被改变了。这是由于后代选择器的级联机制导致的。

在CSS中，如果一个选择器的权重值较高，其后代选择器所定义的样式规则入侵到父元素中的概率就越大。因此，为了避免产生后代选择器污染，大家应该尽可能地减少嵌套层数，同时尽量使用直接子元素选择器、通配符等低优先级选择器。

.parent {
color: red;
}
.parent >.child {
color: blue;
}

在上面的代码中，大家使用了直接子元素选择器（>）来代替后代选择器，并调整了选择器的优先级。这样一来，大家就避免了在父元素中产生不必要的污染，同时使得样式规则更加清晰易懂。