Question

答案可能不是，但无论如何我都会问。使用CSS，是否可以仅覆盖现有样式？

示例：更改具有边框的元素的边框颜色，并保留不带边框的元素。

像

这样的东西

div[border] {}

上面的代码应该只改变具有边框样式的div的样式。有没有这样或没有？

Answer 1

就像在你的问题中解释的那样，你不能用CSS做这样的事情，但如果我们以不同的方式思考，我们可以找到另一种方式。您可以使用CSS variables定义样式，然后只需调整变量的值，您就只能更改现有的CSS。

这是一个简化的例子：

＆＃13;

.class1 {
  border:1px solid var(--c,red);
}
.class2 {
  border-style:solid;
  border-width:5px;
  border-color:var(--c,red);
}
.class-dont-touch {
  border:2px solid red;
}

/* Change the value on the body and it will be inherited by the other element*/
body {
  --c:blue;
}

＆＃13;

<div class="class1">
some content
</div>

<p class="class2">
more content
</p>

<p class="class-dont-touch">
content with border to not modify
</p>

＆＃13;

因此我们只更改父容器中变量的值，并且将更改所有使用的值。这样只会影响所需的样式。

Answer 2

仅当样式设置为HTML属性时才会起作用，例如

div[style*="border"] {
    border-color: #ffff00 !important;
}

CSS仅改变现有样式

2 个答案: