CSS，给定父元素和子元素的className，怎么给子元素select？
[英]CSS, given the className of parent element and child element, how to select the child?
问题描述
I have a Reactjs project where I have a below components: I want to hide the div that has a className 'tool' when body has className 'hasModal', and show the 'tool' div when I remove the className 'hasModal'.
我有一个 Reactjs 项目，其中我有以下组件：我想在 body 具有 className 'hasModal' 时隐藏具有 className 'tool' 的 div，并在删除 className 'hasModal' 时显示'tool' div。 I know how to remove and add className by using document.body.classList.add/remove And I am using display:none to hide the element.我知道如何使用 document.body.classList.add/remove 删除和添加 className 我正在使用 display:none 隐藏元素。 But I do not know how to select the 'tool'element.但我不知道如何 select '工具'元素。
<body class="hasModal">
...
many levels of div
...
<div class="tool">
</div>
</div>
My first intent is to use body.hasModal > div.tool{display: none}, but nothing happened, I can still see the div;我的第一个意图是使用body.hasModal > div.tool{display: none}，但是什么也没发生，我仍然可以看到div； I try to use.hasModal.tool {display: none} but that does not take effect;我尝试使用.hasModal.tool {display: none} 但这没有生效； I also use.hasModal>.tool{display:none} but this can not work either.我也使用 .hasModal>.tool{display:none} 但这也行不通。 Can someone help me with this?有人可以帮我弄这个吗？ Many thanks!非常感谢！
2 个解决方案
解决方案1
1 2021-11-30 23:08:06
.hasModal >.tool will not work, because tool has to be a direct child of hasModal and you have "many levels of div" between them. .hasModal >.tool不起作用，因为tool必须是hasModal的直接子级，并且它们之间有“许多级别的 div”。
.b { background-color: red; }.a >.b { background-color: teal; }
<div class="a"> <div class="b"> works </div> </div> <div class="a"> <div class="whatever"> <div class="b"> works not </div> </div> </div>
.hasModal.tool will not work because it selects all elements that have both classes hasModal and tool . .hasModal.tool将不起作用，因为它会选择同时具有hasModal和tool类的所有元素。
.b { background-color: red; }.ab { background-color: teal; }
<div class="ab"> works </div> <div class="a"> <div class="b"> works not </div> </div>
You should use the "Descendant combinator" which is just a space.您应该使用只是一个空格的“后代组合器”。
.b { background-color: red; }.ab { background-color: teal; }
<div class="a"> <div class="b"> works </div> </div> <div class="a"> <div class="whatever"> <div class="b"> works! </div> </div> </div>
See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors for the details of CSS selectors and how their combinators work.请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors了解 CSS 选择器的详细信息以及它们的组合器如何工作。
解决方案2
0 2021-11-30 23:16:51
It's fairly simple to do this:这样做相当简单：
.hasModal .tool {
display: none;
}
In CSS, to select a descendant of a class you can use a space between the class names as above.在 CSS 到 select 的 class 的后代中，您可以在上面的 ZA2F2ED4F8EBC2CBBD4C2 名称之间使用空格。
Additionally you should refer to W3 Schools for more information on CSS selectors此外，您应该参考W3 Schools以获取有关 CSS 选择器的更多信息
解决方案3
-1 2021-11-30 23:11:07
you can search here for how to select selectors https://www.w3schools.com/cssref/css_selectors.asp你可以在这里搜索如何 select 选择器https://www.w3schools.com/cssref/css_selectors.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.