不修改HTML代码如何用CSS选中并设置底部独立footer标签样式

可行实现方案 #

你需要使用CSS直接子元素选择器来精准匹配目标footer，不需要修改任何HTML代码，实现逻辑如下：

方案1（最推荐，兼容性最好，逻辑最清晰） #

目标footer是id="wrapper"的div的直接子元素，而嵌套在section内的footer属于wrapper的后代元素而非直接子元素，用>符号限定只匹配直接子元素即可：

#wrapper > footer {
  /* 这里写你需要设置的footer样式，举个示例： */
  background: #333;
  color: #fff;
  padding: 16px;
  text-align: center;
}

方案2（可选，用排除伪类实现） #

通过:not()伪类排除所有嵌套在section内的footer元素：

footer:not(section footer) {
  /* 自定义样式 */
}

原理说明 #

你给出的HTML结构中，#wrapper的直接子元素只有三个：顶部header、中间article、最底部footer。直接子元素选择器父元素 > 子元素只会选中父元素的第一级子元素，不会匹配更深层级的嵌套元素，完美避开了section内的footer。

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