有沒有辦法以連續的方式應用相同的 css var？或者獲取當前的 css 屬性值，然后附加一個新的？我需要這個在一些嵌套元素上應用多個轉換。
作業示例需要 2 個單獨的 var 用于父母和孩子
<style>
p {
transform: scale(var(--scale, 1)) scale(var(--parentScale, 1)) ;
}
</style>
<div style="--parentScale: 0.8">
<p style="--scale: -1;">Hello</p>
</div><style>
p {
transform: scale(var(--scale, 1));
}
</style>
<div style="--scale: 0.8">
<p style="--scale: -1;">Hello</p>
</div>有什么解決方法嗎？如果可能沒有 js
uj5u.com熱心網友回復：
--scale 變數在 div 中定義，但從未在 div 上使用。
此代碼段將 div 和 p 都設定為具有各自相關的轉換--scale
div,
p {
transform: scale(var(--scale, 1));
}<div style="--scale: 0.8">
<p style="--scale: -1;">Hello</p>
</div>更新：評論中有一個澄清，即每個單獨的孩子，而不是父 div，需要進行 0.8 縮放。
因此，此代碼段引入了第二個變數 --childscale，它最初設定為 1 并與 --scale 結合使用。任何未設定它的 div 都不受影響。對于您正在尋找翻轉的 div，-childscale 設定為-1。
p {
transform: scale(calc(var(--scale) * var(--childscale)), 1);
}<div style="--scale: 0.8; --childscale: 1;">
<p style="--childscale: -1;">Hello</p>
<p>Hello</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/478193.html
上一篇：是否有考慮父類的css選擇器？