应用样式

Question

我有一个下面的HTML如下：

<div class="outerdiv"> 
     <div class="title"> 
     <div class="innerdiv"> 
     <div class="outerdiv"> 
     <div class="title"> 
     <div class="innerdiv"> 
      <div class="outerdiv"> 
      <div class="innerdiv> 
<div class="outerdiv"> 
     <div class="title"> 
     <div class="innerdiv"> 
</div> 
</div> 
</div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 

我要申请"border-width:10px"与class = innerdiv所有div规定“outerdiv”既包含“冠军”和“ innerdiv“ 。 我的预期成果是：

<div class="outerdiv"> 
     <div class="title"> 
     <div class="innerdiv" style="border-width:10px"> 
     <div class="outerdiv"> 
     <div class="title"> 
     <div class="innerdiv" style="border-width:10px"> 
      <div class="outerdiv"> 
      <div class="innerdiv> 
<div class="outerdiv"> 
     <div class="title"> 
     <div class="innerdiv" style="border-width:10px"> 
</div> 
</div> 
</div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 

我想这一点：

$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px"). 

编辑：申报单的数量是动态的，而不是固定数量

Answer 1

您需要使用:has选择即日孩子选择沿着目标innerdiv元素：

$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px"); 

DEMO片段：

$(function(){ 
 
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey') 
 
}) ;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="outerdiv"> 
 
    <div class="title">1 
 
    <div class="innerdiv">2 
 
    <div class="outerdiv">3 
 
    <div class="title">4 
 
    <div class="innerdiv">5 
 
     <div class="outerdiv">6 
 
     <div class="innerdiv">7 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</div>

Answer 2

只需使用：

$('.innerdiv').css('border-width','10px'); 

它将为类'innerdiv'的所有div添加border-width。

Answer 3

你可以做到这一点良好的CSS层次结构只是将样式应用于

.outerdiv > .title > .innerdiv{ 
    css goes here 
} 

它们只会影响您提到的层次结构中的div。