如何为非div标签内文本应用CSS左内边距且不移动div元素？

嘿，这个问题其实挺常见的——因为CSS没法直接选中文本节点（就是那些没被任何HTML标签包裹的文字），所以我们得换个思路来实现你要的效果。这里有两种靠谱的方法，都不需要修改你的现有HTML结构：

方法一：利用body内边距+div负外边距 #

这是最稳妥的方案，尤其适合简单页面结构：

body {
  padding-left: 100px;
}
div {
  margin-left: -100px;
}

原理： #

给整个body设置左内边距后，body里的所有内容（包括那个未被包裹的文本）都会自动右移100px。然后给蓝色div加一个负的左外边距，把它拉回原来的位置，这样就只有非div的文本保留了左内边距，蓝色div完全不受影响。

方法二：使用:not()选择器覆盖样式 #

如果你更倾向于用排除式选择器，也可以这么写：

*:not(div) {
  padding-left: 100px;
}
div {
  padding-left: 0;
}

原理： #

*:not(div)会选中页面上所有不是div的元素，给它们加上左内边距。然后专门给div设置padding-left: 0来覆盖这个规则。不过要注意，这个选择器范围是全局的，如果你的页面有更多嵌套元素，可能需要缩小范围（比如改成body > *:not(div)只选中body的直接子元素），但在你当前的简单HTML里完全能用。

额外小建议（可选） #

如果你愿意稍微调整HTML结构，把未被包裹的文本放进<p>标签里，那CSS会更直观：

<body>
  <div style="background-color: blue;">This is a div</div>
  <p>This is not a div</p>
</body>

对应的CSS可以直接写：

p {
  padding-left: 100px;
}

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