如何为h2标签内未设类/ID的span标签设置CSS样式？

你可以通过CSS选择器直接定位到这个span，不需要额外给它加类或ID，以下是几种常用的实现方式：

1. 直接子元素选择器（最精准） #

用h2 > span选择器，只会选中h2的直接子元素span，避免误影响其他嵌套更深的span：

h2 > span {
  color: #ff4444;
  font-size: 0.8em;
  background-color: #fff3cd;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

2. 后代选择器 #

如果你的页面里h2下只有这一个span，也可以用更简洁的h2 span选择器，它会选中h2下所有的span后代元素：

h2 span {
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

3. 结合父容器的精准定位（按需使用） #

如果这个h2是在某个特定容器内（比如菜品卡片模块），可以结合父元素选择器进一步缩小作用范围，避免影响页面其他h2里的span：

.dish-card h2 span {
  /* 自定义样式代码 */
}

根据你的页面结构选择最合适的选择器即可，以上写法都能直接作用到你指定的span标签上。

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