[分享]css只在当前起作用

CSS 是网页排版中非常重要的一个组成部分，习惯就像我们每天穿衣一样必不可少，但有时候我们希望 CSS 只在当前起作用，这就需要一些特殊的技巧。首先，我们需要了解 CSS 的层叠性质，即同一个元素上的...

CSS 是网页排版中非常重要的一个组成部分，习惯就像我们每天穿衣一样必不可少，但有时候我们希望 CSS 只在当前起作用，这就需要一些特殊的技巧。

首先，我们需要了解 CSS 的层叠性质，即同一个元素上的多个样式属性值可以在不同的条件下被同时应用。但是，我们可以使用 !important 这个关键字来强制使用一个样式，例如：

p {
   color: red !important;
} 

这样，即使我们在后面又添加了一个样式：

p {
   color: blue;
} 

最终结果也是红色，因为 !important 的优先级最高。

但是，这样的写法有时候会出现问题，因为 !important 会给维护和修改带来一定的麻烦，而且可能会覆盖其他样式的应用。因此，我们可以使用“子元素”的技巧，例如：

.container {
   background-color: yellow;
}

.container p {
   background-color: white;
} 

这样我们就定义了两个样式，一个是容器的背景颜色为黄色，另一个是容器内所有段落元素的背景颜色为白色。这时候，如果我们将一个容器元素标记为 container，那么实际上只有容器内的段落元素会被白色背景覆盖，其他元素的背景颜色仍然为黄色。

以上就是一些让 CSS 只在当前起作用的技巧，它们可以帮助我们更好地控制样式应用的范围，避免出现不必要的覆盖和冲突。