为何最后一个talk div仅继承base.css 未生效main.css样式规则

这问题和CSS优先级、DOM嵌套结构没有关系，是两个基础错误导致的：

• 首先是HTML语法写错了：talk模块里的描述p标签class属性的引号位置错位，原代码为

<p class="talk-desc>"></p>

浏览器解析时会把talk-desc>识别为这个p标签的真实类名，完全匹配不到main.css里定义的.talk-desc选择器，对应样式自然不会生效。

• 其次是CSS引入顺序错误：如果.talk-subtitle、.talk-button两个类名写法正确但样式仍不生效，说明两个CSS文件的引入顺序写反了。浏览器解析CSS是按引入顺序从上到下执行的，同优先级规则下后加载的样式会覆盖先加载的样式，要是先引入main.css再引入base.css，base.css里的全局规则就会覆盖main.css中写的talk模块样式。
• 当自定义类规则要么匹配失败、要么被同优先级前置样式覆盖时，talk模块下的元素就只会命中base.css里的全局通配符*规则、以及从body继承的全局文本样式，看起来就像是优先应用了base.css的规则。

1. 修正p标签的class属性写法，删除错位的符号，改为正确格式：

<p class="talk-desc"></p>

2. 调整CSS文件引入顺序，保证基础样式在前、自定义业务样式在后：

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="main.css">

3. 排查边缘异常：打开浏览器F12开发者工具，在Network面板确认main.css加载成功，不存在路径错误报404的问题；再切换到Elements面板选中talk模块下的对应元素，在Styles面板检查是否存在其他更高优先级的规则命中元素，覆盖了预期样式。

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