能否在CSS中访问元素样式及其他对象属性？附示例代码说明需求

一、引用自身其他属性的实现方式 #

你写的height: width这种直接引用自身属性的写法，原生CSS目前不支持，但可以用以下两种方式达到类似效果：

• CSS变量（自定义属性）：把需要复用的值定义成变量，再在需要的地方调用，示例：

#bigbox{
  --box-width: 10vw;
  width: var(--box-width);
  height: var(--box-width);
}

• aspect-ratio属性：如果是要维持宽高比例，直接用这个属性更省心，比如aspect-ratio: 1/1就能实现正方形，不用手动关联宽高数值。

二、引用其他元素属性的实现方式 #

原生CSS没有直接读取其他元素属性值的语法（比如你写的opacity: #smallbox.opacity完全不生效），但可以通过间接方式实现：

• 共享全局CSS变量：把要跨元素复用的值定义在全局作用域（:root）或者共同父元素里，让两个元素都引用这个变量，示例：

:root{
  --shared-opacity: 75%;
}
#smallbox{
  opacity: var(--shared-opacity);
}
#bigbox{
  width: 10vw;
  height: 10vw;
  opacity: var(--shared-opacity);
}

• CSS预处理器（Sass/Less等）：这类工具支持更灵活的变量复用逻辑，定义变量后在多个选择器中引用，编译后生成普通CSS代码。

三、额外说明 #

• 原生CSS变量是动态的，变量值更新后，所有引用它的元素属性会自动同步变化。
• 预处理器变量是编译时处理的，编译完成后就变成固定值，无法在浏览器运行时动态修改。

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