如何基于应用元素区分CSS样式？（纯CSS/HTML实现）

当然有靠谱的纯CSS方案啦！完全不用依赖JS或者元素嵌套，就能根据样式所应用的元素类型来区分样式，下面给你几个实用的方法：

1. 元素类型+类选择器组合 #

这是最直接的方式，给同一个类名搭配不同的元素类型选择器，就能让相同类名在不同元素上呈现不同样式：

/* 通用基础样式（所有元素共享） */
.custom-style {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* 段落应用的特殊样式 */
p.custom-style {
  color: #2d3748;
  background-color: #f7fafc;
}

/* 容器元素应用的特殊样式 */
div.custom-style {
  color: #ffffff;
  background-color: #2b6cb0;
}

/* 按钮元素应用的特殊样式 */
button.custom-style {
  border: none;
  cursor: pointer;
  font-weight: 600;
}

对应的HTML用法也很简单，直接给元素加类名就行：

<p class="custom-style">我是带样式的段落</p>
<div class="custom-style">我是带样式的div容器</div>
<button class="custom-style">我是带样式的按钮</button>

2. 用:is()伪类简化多元素样式 #

如果你需要给多个元素设置同一种特殊样式，:is()伪类能帮你简化代码，避免重复写选择器：

.custom-style {
  padding: 12px;
  border-radius: 6px;
}

/* 同时给p、span、a元素设置相同的特殊样式 */
:is(p, span, a).custom-style {
  color: #2d3748;
  background: #f7fafc;
}

/* 同时给div、section、article元素设置相同的特殊样式 */
:is(div, section, article).custom-style {
  color: #fff;
  background: #2b6cb0;
}

3. CSS变量+元素选择器实现灵活切换 #

如果你的样式需要更灵活的定制，CSS自定义变量是个好选择。给不同元素设置不同的变量值，通用类里直接引用变量即可：

.custom-style {
  padding: 12px;
  border-radius: 6px;
  /* 定义默认变量值 */
  color: var(--text-color, #333);
  background-color: var(--bg-color, #eee);
  border-color: var(--border-color, #ddd);
}

p.custom-style {
  --text-color: #2d3748;
  --bg-color: #f7fafc;
  --border-color: #e2e8f0;
}

div.custom-style {
  --text-color: #fff;
  --bg-color: #2b6cb0;
  --border-color: #2c5282;
}

这些方案都完全满足你的需求：不需要JavaScript，也不依赖元素嵌套，纯CSS+HTML就能实现根据应用元素区分样式的效果。

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