如何使单个CSS样式不影响指定元素？以text-align排除div3为例

核心思路是从一开始就不给div3应用text-align:center样式，而不是先给它加上再覆盖掉。这里有两种简洁的实现方式：

方式1：拆分公共样式与差异化样式 #

把四个div的公共样式（宽度、高度、display、transform）单独提取出来，只给需要居中的三个div设置文本居中：

/* 四个div共享的基础样式 */
#div1, #div2, #div3, #div4 {
  width: 24%;
  height: 400px;
  display: inline-block;
  transform: translateY(50%) translateX(15px);
}

/* 仅给div1、div2、div4设置文本居中 */
#div1, #div2, #div4 {
  text-align: center;
}

这种方式最清晰，也符合CSS模块化的思路，div3自然不会受到text-align:center的影响，完全没有用到任何覆盖操作。

方式2：使用:not()伪类排除div3 #

如果你不想拆分样式规则，可以在原群组选择器里用:not()伪类把div3排除在外，只给剩下的三个div应用包含文本居中的完整样式：

#div1, #div2, #div4, #div3:not(#div3) {
  width: 24%;
  height: 400px;
  display: inline-block;
  text-align: center;
  transform: translateY(50%) translateX(15px);
}

这里:not(#div3)会让选择器匹配不到div3，所以text-align:center不会作用在它身上，同样没有任何覆盖操作。

补充说明 #

text-align是继承属性，如果你希望div3继承其父元素的文本对齐样式，这两种方案都完美适配——因为我们根本没给div3设置任何text-align属性，它会自动继承父元素的样式（或者使用浏览器默认的text-align:left）。

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