Question

我有一个父元素和一个像这样的子元素

<parent element>

    <...>

         <...>

               <child element></child element>

         </...>

     <...>

</parent element>

我想让子元素接收父/ 2的宽度。

我很奇怪，CSS3允许使用类似的东西：

child{
    width:parent().parent().parent().width/2 + "px"
}

我无法使用jquery，我无法向HTML添加任何其他代码，我只能访问CSS文件。这可能吗？

Answer 1

不完全是，但您可以实现类似的混合CSS variables和calc：

以下是使用父级范围变量

的示例

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)。

由于CSS variables只是自定义属性，因此您可以完全存储计算结果（请注意范围），如下所示：--prop: calc((100vw - 2em) / 2 + 10vh - (var(--margin) * 2));

Answer 2

您可以在其他答案中正确提及calc。

calc（）CSS函数可以在任何地方使用， ,,或者是必需的。用calc（），你可以执行计算以确定CSS属性值。

CSS cals支持以下算术运算：

增添。
减法。
乘法。至少有一个参数必须是a。
司。右侧必须是a。

示例：

width: calc(50% + 50px);

css3是否允许数学计算

2 个答案: