Fatal编程技术网
  • javascript/
  • Javascript 路径中每个节点的css选择器

Javascript 路径中每个节点的css选择器

javascript html css

Javascript 路径中每个节点的css选择器,javascript,html,css,css-selectors,flexbox,Javascript,Html,Css,Css Selectors,Flexbox,我试图用一个div来填充剩余屏幕空间的高度，在这里找到了一个很好的答案：（选择的答案） 我对s的问题是，他呈现的内容的flex容器是height:100%，是html和body元素的直接子元素height:100%。在我的应用程序中，在主体和flex容器之间有一堆中间元素，如果我想让flex容器填满所有可用的垂直空间，这些元素中的每一个都必须具有高度：100% 如果我有一个css规则，比如 * { height: 100%; } 但这太疯狂了，对吧？我不知道将DOM中的每个元

我试图用一个div来填充剩余屏幕空间的高度，在这里找到了一个很好的答案：（选择的答案）

我对s的问题是，他呈现的内容的flex容器是
height:100%
，是html和body元素的直接子元素
height:100%
。在我的应用程序中，在主体和flex容器之间有一堆中间元素，如果我想让flex容器填满所有可用的垂直空间，这些元素中的每一个都必须具有
高度：100%

如果我有一个css规则，比如

 * {
     height: 100%;
   }
但这太疯狂了，对吧？我不知道将DOM中的每个元素都设置为100%是否有问题，但如果不需要，我宁愿不这样做

我尝试过（认为这会选择body和我的flex box之间的每个元素）：

没有运气

我的html（经过react处理后）看起来有点像：

<html>
  <body>
    <div>
      <div class="another-div">
        <div class="another-div navbar-and-whatnot">
          <div class="yet-another-bunch-of-divs">
            <div class="flex-box">
              <div class="flex-remaining-height">
                <svg class="this-should-be-big" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
我想现在我可以找出
body
和我的flex-box之间路径中的每一个元素，并为它们设置高度，但这相当脆弱。我需要经常修理它

顺便说一句，我使用的是react引导，所以如果有更简单的解决方案，我会选择它

在进一步的上下文中，我之所以要这样做，是因为我正在使用一个库来创建一个与其周围div一样大的SVG元素，并且我希望SVG尽可能大（并且适合屏幕）

另外，我还加载了jquery。我想这是最简单的解决办法。不过，有一个css解决方案还是不错的。

css中没有办法选择这种“路径”使用
*
选择所有内容都是危险的，而且性能也不好。我建议您自己定义路径。最简单的方法可能是定义一个类，比如说
.full height
，然后将该类赋予路径中的所有元素。这样，您只需将类添加到添加到此路径的任何新元素中，CSS就可以保持不变

.full-height {
  height: 100%
}
CSS中没有办法选择这种“路径”使用
*
选择所有内容都是危险的，而且性能也不好。我建议您自己定义路径。最简单的方法可能是定义一个类，比如说
.full height
，然后将该类赋予路径中的所有元素。这样，您只需将类添加到添加到此路径的任何新元素中，CSS就可以保持不变

.full-height {
  height: 100%
}
恐怕你在那里运气不好。不可能编写与给定元素的所有祖先匹配的单一复杂选择器

选择器
body*.flex-box
与
.flex-box
匹配，该选择器至少包含一个出现在它和
body
之间的祖先。这样的选择器意味着
body>.flex-box
将不匹配。除了
.flex-box
（除非
.flex-box
本身包含另一个
.flex-box
，在这种情况下，两者都会匹配，简直是天方夜谭）。

恐怕你在那里运气不好。不可能编写与给定元素的所有祖先匹配的单一复杂选择器

选择器
body*.flex-box
与
.flex-box
匹配，该选择器至少包含一个出现在它和
body
之间的祖先。这样的选择器意味着
body>.flex-box
将不匹配。除了
.flex-box
（除非
.flex-box
本身包含另一个
.flex-box
，在这种情况下，两者都将匹配，这是一种怪癖）。

显示您的代码，没有它就无法帮助您。谢谢。给我们看看你的代码，没有它是不可能帮助你的。谢谢。“用*选择任何东西都是危险的，而且性能也不好。”但他不是这么做的，所以这很好。@BoltClock在最初的问题中提到这是一种极端的可能性。我只是想强调这确实是一个非常糟糕的主意。啊，我错过了。好主意。谢谢事实上，我觉得这不太管用——我的整个前提都错了。拥有
全高
等级的东西会变成与身体相同的高度，即使它们上面和下面都有东西。“用*选择任何东西都是危险的，而且性能也不好。”但他不是这么做的，所以这很好。@BoltClock在最初的问题中提到这是一种极端的可能性。我只是想强调这确实是一个非常糟糕的主意。啊，我错过了。好主意。谢谢事实上，我觉得这不太管用——我的整个前提都错了。拥有
全高
等级的物体与身体的高度相同，即使它们上面和下面都有东西。