如何通过检查其子CSS属性添加到元素的伪类有特定的类名

Question

<div class="header"> 
<span class= "text"> 
    <span class="icon disable"> 
    ::before 
    </span> 
<span> 
    ::after 
</div> 

我要添加CSS属性背景：透明的伪类::与类名“文本”跨度后，通过检查它的子范围有类名“禁用”。

请检查图片了解我的要求给我任何解决方案。是否有可能在CSS中做到这一点？

我试了很多个小时..请帮帮我！ 在此先感谢.......... described in image

Answer 1

并非如此简单。但你可以简单地使用jQuery hasClass()方法来完成。

HTML

<div class="header"> 
    <span class= "text"> 
    <span class="icon disable"> 
     Hai 
    </span> 
    <span> 
</div> 

JQuery的

if($('.icon').hasClass('disable')) { 
    $('.text').addClass('disableChild') 
} 

CSS

.disableChild { 
    background-color: red; 
} 

检查此链接 codepen的工作模式。

Answer 2

if ($(".text").children().hasClass("disable")) { 
 
    $(".text").addClass("child-disable"); 
 
}

.text.child-disable::after { 
 
    background: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    <span class="text"> 
 
    <span class="icon disable"> 
 
    </span> 
 
    </span> 
 
</div>

或者，当你有你的页面上的多个元素，你想做到这一点的每个元素，你可以使用以下命令：

$(".text").each(function(i, el) { 
 
    var $this = $(el); 
 
    if ($this.children().hasClass("disable")) { 
 
    $this.addClass("child-disabled"); 
 
    } 
 
});

.text.child-disabled::after { 
 
    background: transparent; 
 
} 
 

 
.header { 
 
    background-color: #f5f5f5; 
 
    width: 95%; 
 
    margin: 12px auto; 
 
} 
 

 
.icon { 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.icon:not(.disable) { 
 
    color: red; 
 
} 
 

 
.text::after { 
 
    content: ""; 
 
    width: 100%; 
 
    display: block; 
 
    height: 4px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="header"> 
 
    <span class="text"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p> 
 
    <span class="icon disable"> 
 
    &hearts; 
 
    </span> 
 
    </span> 
 
</div> 
 

 
<div class="header"> 
 
    <span class="text"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p> 
 
    <span class="icon"> 
 
    &hearts; 
 
    </span> 
 
    </span> 
 
</div>