CSS类选择器样式意外作用于非目标类元素的问题咨询

参考页面结构 #

这不是CSS类选择器模糊匹配导致的，核心原因是两点：

1. 你给<body>标签添加了testClass类，.testClass选择器设置的color文本颜色样式，最终是作用在整个body元素上的
2. CSS的color属于可继承属性：父元素上设置的可继承属性值，会默认传递给所有没有单独设置该属性的后代元素。

你截图里带testClassing类的元素是body的后代节点，自身没有单独定义color样式，自然会继承body的文本颜色，和它自身的类名没有关系——哪怕这个元素没有任何类名，只要嵌套在带testClass类的body内部，都会拿到这个继承来的文本颜色。

补充说明：CSS类选择器是精确匹配独立类名的，.testClass只会命中class属性中包含testClass这一独立类名的元素，不会因为其他类名（比如testClassing）包含相同的字符串就错误匹配，只有属性选择器[class*="testClass"]才会做字符串层面的模糊匹配。

你可以通过几个简单操作确认这个逻辑：

• 给.testClassing单独添加文本颜色样式，比如.testClassing { color: #f00; }，保存后会看到该元素文本变成红色，不再继承父级的颜色
• 临时移除body标签上的testClass类，会看到页面内所有没有单独设置文本颜色的元素（包括testClassing对应的元素）都会变回浏览器默认的文本颜色
• 把.testClass里的color属性换成不可继承属性（比如border: 1px solid #f00），会看到边框只出现在body元素边缘，内部的testClassing元素不会出现边框，因为这类属性不会向下传递

日常写CSS时可以记个简单规律：和文本排版相关的属性大多默认可继承，和盒模型、布局定位相关的属性大多默认不可继承：

• 高频可继承属性：color、font-family/font-size/font-weight等字体相关属性、line-height/text-align/text-indent等文本排版属性、visibility
• 高频不可继承属性：margin、padding、border、background系列属性、width/height、display、position、float

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