如何在无JavaScript时，仅当header含[data-header-style="Standard"]时设置main内边距？

当然可以不用JavaScript实现，核心是利用CSS的兄弟选择器，不过这依赖你的DOM结构布局：

核心思路 #

CSS的通用兄弟选择器（~）可以选中目标元素之后的所有同级元素，结合属性选择器就能实现需求。

情况1：Header与Main是同级元素（Header在前） #

如果你的DOM结构是这样的：

<header class="header" data-header-style="Standard"></header>
<main>页面主体内容</main>

直接用以下CSS即可：

/* 当header同时拥有.header类和[data-header-style="Standard"]属性时，选中其后的所有同级main元素 */
.header[data-header-style="Standard"] ~ main {
  padding: 100px;
}

如果Header和Main是紧邻的同级元素，也可以用相邻兄弟选择器（+），它只会选中紧跟在目标元素后的第一个同级元素：

.header[data-header-style="Standard"] + main {
  padding: 100px;
}

情况2：Main在Header的同级容器内 #

如果你的DOM结构是嵌套的，比如Main在某个容器里，而容器和Header同级：

<header class="header" data-header-style="Standard"></header>
<div class="page-container">
  <main>页面主体内容</main>
</div>

可以通过选择容器再定位到Main：

.header[data-header-style="Standard"] ~ .page-container main {
  padding: 100px;
}

注意事项 #

• 这种纯CSS方案的前提是Header在DOM结构中位于Main（或Main的父容器）之前，因为CSS目前没有支持选择“前置兄弟元素”的选择器，如果Header在Main之后，纯CSS无法实现，只能借助JavaScript。

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