如何在CSS中引用另一个类的特定属性值？

要实现.cobra自动同步.viper的尺寸且满足你的需求，用**CSS自定义属性（变量）**是最直接的方案，步骤如下：

1. 在.viper中定义尺寸变量，将原有的宽高值赋值给变量，同时修正原calc的语法错误
2. 在.cobra中直接引用这些变量，实现宽度为.viper的1/2、高度完全一致的效果，后续修改.viper时.cobra会自动同步更新

修改后的完整代码 #

.viper {
    --viper-width: calc(((100px - 50px) * 3) / 2);
    --viper-height: 200px;
    width: var(--viper-width);
    height: var(--viper-height);
    font-family: garamond;
    color: black; /* 注意：CSS无font-color属性，正确属性为color */
}

.cobra {
    width: calc(var(--viper-width) / 2);
    height: var(--viper-height);
    font-family: georgia;
    color: blue;
}

关键说明 #

• 定义--viper-width和--viper-height变量后，.viper的尺寸由变量控制，后续修改只需调整变量值即可
• .cobra通过var()函数引用变量，宽度用calc()再除以2，精准实现需求
• 顺便修正了原代码的两处错误：font-color为无效属性，正确写法是color；原calc表达式多了一个闭合括号，导致语法错误

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