Question

我想知道是否有办法做到这一点。

我想只更改特定CSS类的单个属性，而不必再次复制它并指定不同的类名。

所以，如果我有这个课程

<div class="example">I am a red font with properties </div>

这是CSS

.example {
font-size:2em;
font-color:red;
padding:2%;
display:inline;
//other several properties }

现在，我想在我的其他div中使用示例类，但我只想让字体变为绿色。我不想复制相同的属性，只是分配一个不同的类名，

<div class="example2">I am a green font with properties </div>

同样，example2将与示例相同，但只会改变字体颜色

这是CSS

.example2 {
 font-size:2em;
 font-color:green;
 padding:2%;
 display:inline;
 //other several properties same as example class

有没有办法导入CSS属性而无需复制它并重命名？像

这样的东西

<div class="example" onlychange="font-color:green">
           I am a green font with properties </div>

任何实现类似onlychange属性的技术？

Answer 1

这有两种方法。首先是添加另一个类并单独更改一个属性，第二个类属性将替换先前的类属性（如果它在两者中都存在）。

第二种方法是将其写为内联样式。不需要额外的课程！

.example {
  font-size: 2em;
  color: red;
  padding: 2%;
  display: inline;
}

.green {
  color: green;
}

<span class="example green">test</span>

<span class="example" style="color:green;">test</span>

Answer 2

如果您确定DIV元素的位置保持不变，那么您可以尝试使用nth-child属性。例如https://www.w3schools.com/cssref/sel_nth-child.asp

    <div class="example2">I am a red font with properties </div>
    <div class="example2">I am a green font with properties </div>
    <div class="example2">I am a red font with properties </div>

    Your style for that specific "example2" should be :
    <style>
    div.example2:nth-child(2){background-color:green;}
    </style>

示例是“背景颜色”，您也可以设置“颜色”属性。

CSS在不使用不同类名的情况下更改一个类的单个元素

2 个答案: