CSS中使用ID与类组合选择器无法选中对应元素如何解决？

问题原因排查 #

1. 组合选择器写法规范说明 #

#ID.Class这种写法本身完全符合CSS规范，它的作用是**匹配同时满足两个条件的同一个元素：元素ID为指定值，同时元素包含指定类名。

2. 代码无法生效的核心原因 #

你写的#name.cta两个选择器之间没有空格，按照规则会匹配「同时拥有id="name"、且带有cta类的元素，但你的页面中：

• id="name"的是<section>标签，它本身没有cta类
• 带有cta类的<a>标签是section#name的后代元素，不是同一个元素
  所以这个选择器匹配不到任何元素，自然不会生效。

3. 修复方案 #

如果要选中id="name"的元素内部所有带有cta类的后代元素，只需要在两个选择器之间加一个空格，改成：

#name .cta {
  /* 你的样式代码 */
}

这种带空格的写法属于CSS后代选择器，专门用于匹配父元素内部的对应后代元素，和你之前看到的教程用法逻辑一致。

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