Jquery css3允许数学计算吗

我有一个父元素和一个子元素，如下所示

<parent element>

    <...>

         <...>

               <child element></child element>

         </...>

     <...>

</parent element>

---

我不能使用jquery，也不能在HTML中添加任何额外的代码，我只能访问CSS文件。这可能吗？

不完全可能，但您可以实现类似的混合和

计算：

下面是一个使用父范围变量的示例

your_parent_element_selector{
  --ParentWidth: 100vw;
  width: var(--ParentWidth);
}

your_parent_element_selector /* ... */ your_child_selector{
  width: calc(var(--ParentWidth) / 2);
  /*no need for units for those simple calculations*/
  /*this variable is accessible because the child is within
  the parent's scope*/
}

:root{
  /*[...]*/
  --ThisSpecificParentWidth: 100vw;
}

your_parent_element_selector{
  width: var(--ThisSpecificParentWidth);
  /*accessible bc everything is within :root's scope*/
}

your_parent_element_selector /* ... */ your_child_selector{
  width: calc(var(--ThisSpecificParentWidth) / 2);
}

下面是一个使用“全局”范围变量的示例

your_parent_element_selector{
  --ParentWidth: 100vw;
  width: var(--ParentWidth);
}

your_parent_element_selector /* ... */ your_child_selector{
  width: calc(var(--ParentWidth) / 2);
  /*no need for units for those simple calculations*/
  /*this variable is accessible because the child is within
  the parent's scope*/
}

:root{
  /*[...]*/
  --ThisSpecificParentWidth: 100vw;
}

your_parent_element_selector{
  width: var(--ThisSpecificParentWidth);
  /*accessible bc everything is within :root's scope*/
}

your_parent_element_selector /* ... */ your_child_selector{
  width: calc(var(--ThisSpecificParentWidth) / 2);
}




关于
calc
有一点非常有趣，那就是您可以实现非常复杂的计算，例如：
calc（（100vw-2em）/2+10vh）
。



由于只是自定义属性，您可以完全存储计算结果（注意范围），如下所示：
--prop:calc（（100vw-2em）/2+10vh-（var（--margin）*2））
您可以使用其他答案中正确提到的
calc

calc（）CSS函数可以在任何位置使用，
、或是必需的。使用calc（），您可以
可以执行计算以确定CSS属性值

CSS CAL支持以下算术运算：


增加
减法
乘法运算。至少有一个参数必须是
分部。右手边必须是a

例如：

width: calc(50% + 50px);

为什么不给第一个孩子50%的宽度呢？没用。我使用元素的绝对位置。我真的需要使用数学。只有当父元素和子元素之间的元素有一个静态位置时，这才可能。相反，如果你给我们一个真实的场景，我们会看到所有这些元素是如何交互的，以及父元素与视口的关系，那么可能会有其他方法来解决这个问题。。。我只能将样式附加到css表中。遗憾的是，不进行修改是不可行的，css没有那么灵活。