将 class 应用于具有另一个 div 的 div，其中包含特定的 class
[英]Apply class to div that has another div with specific class inside it
问题描述
This is my HTML:
这是我的 HTML：
<div class='class1'>
<div class='class2'>
<div class='class3'>
<a class='link' href='alink'>Go somewhere</a>
</div>
</div>
<div>
What i need to do is apply a CSS class to the div that have class2, but only if they have a div with class3 inside;我需要做的是将 CSS class 应用于具有 class2 的 div，但前提是它们有一个内部带有 class3 的 div；
.class1 .class2 ".....class3"{
border: 1px black;
}
If class2 don't have a div inside with class3 i need to apply another CSS class:如果class2里面没有class3的div，我需要应用另一个CSS class：
.class1 .class2{
border: 0;
}
Thanks.谢谢。
4 个解决方案
解决方案1
0 2020-06-19 07:11:16
In order to select the doc with class2, you would need to find the parent of all elements with class3.为了 select 具有 class2 的文档，您需要找到具有 class3 的所有元素的父级。 Unfortunately there is no such thing as the parent selector in css.不幸的是，css 中没有父选择器之类的东西。 It's been highly requested, but there are performance concerns.要求很高，但存在性能问题。
Please see this answered question for more information.请参阅此已回答的问题以获取更多信息。
解决方案2
0 已采纳 2020-06-19 07:12:24
You will need to use JavaScript for it, Try this Jquery Code:您需要为此使用 JavaScript，试试这个 Jquery 代码：
Add this script in your <head> tag:在你的<head>标签中添加这个脚本：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Put this code in <script> tag:将此代码放在<script>标记中：
if ($(".class2 .class3").length > 0){
$(".class2").css("border", "1px black")
} else {
$(".class2").css("border", "border: 0")
}
解决方案3
0 2020-06-19 08:17:26
Can't achieve this with CSS only.仅使用 CSS 无法实现此目的。 you need a bit of javascript here.你需要一点 javascript 这里。 In below example I'm applying .redBorder class to the.class2 div with.class3 div inside, otherwise it will have a .blackBorder class.在下面的示例中，我将.redBorder class 应用到内部带有 .class3 div 的 .class2 div，否则它将有一个.blackBorder class。
(function() { let class2Divs = document.getElementsByClassName("class2"); Array.from(class2Divs).forEach(elem => { // check whether this div has class3 div if(elem.getElementsByClassName("class3").length) { //if this class2 div has class3 inside, run this code elem.classList.add("redBorder"); } else { //if this class2 div doesn't has class3 inside, run this code elem.classList.add("blackBorder"); } }); }());
div { margin: 20px; }.redBorder { border: 3px solid red; }.blackBorder { border: 3px solid black; }
<div class="class1"> <div class="class2"> <div class="class3">This div has class3 div</div> </div> <div class="class2"> <div>This div doesn't has class3 div</div> </div> </div>
解决方案4
0 2020-06-19 11:31:29
In your code the triggering point is your second div <div class="class2"> so you need to find that <div class="class2"> have any children.在您的代码中，触发点是您的第二个 div <div class="class2">所以您需要找到<div class="class2">有任何子级。 you can use Jquery to find this and change css您可以使用 Jquery 找到这个并更改 css
$( ".class2" ).children().css( "border", "0" );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.