子要素のテキスト装飾をオーバーライドします。

Question

子要素の親CSSをオーバーライドします。 子要素ではなく、親要素に下線を引っ張りたい。

.parent { 
 
    text-decoration: underline; 
 
    color: red; 
 
} 
 
.child { 
 
    color: green; 
 
    text-decoration: none !important; 
 
} 
 
.sub-child { 
 
    color: green; 
 
    text-decoration: none !important; 
 
}

<div class="parent">Inside parent 
 
    <div class="child">Inside first child 
 
    <div class="sub-child">Inside 1st child of 1st child 
 
    </div> 
 
    </div> 
 
    <div class="child">Inside 2nd child 
 
    <div class="sub-child">Inside 1st child of 2nd child</div> 
 
    <div class="sub-child">Inside 2nd child of 2nd child</div> 
 
    </div> 
 
    <div class="child"> 
 
    Inside 3rd child 
 
    <div class="sub-child">Insde 1st child of 3rd child</div> 
 
    </div> 
 
</div>

Answer 1

あなたはこの

HTML

<div class="parent"><span class="parent_text">Inside parent</span> 
      <div class="child">Inside first child 
       <div class="sub-child">Inside 1st child of 1st child 
      </div> 
      </div> 
      <div class="child"> Inside 2nd child 
        <div class="sub-child">Inside 1st child of 2nd child</div> 
        <div class="sub-child">Inside 2nd child of 2nd child</div> 
       </div> 
       <div class="child"> 
       Inside 3rd child 
        <div class="sub-child">Insde 1st child of 3rd child</div> 
       </div> 
     </div> 

CSS

のように、親要素のテキストにスパンを追加することによってこれを行うことができます

.parent span.parent_text{ 
    text-decoration:underline; 
} 

Answer 2

jQueryのタグ付けされているとして、あなたはこれを行うことができます。

$('.parent').contents().filter(function(i,el){ 
 
    return el.nodeType === 3; 
 
}).wrap('<em>')

.parent em{ 
 
    text-decoration: underline; 
 
    color: red; 
 
} 
 
.child { 
 
    color: green; 
 
    text-decoration: none !important; 
 
} 
 
.sub-child { 
 
    color: green; 
 
    text-decoration: none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent">Inside parent 
 
    <div class="child">Inside first child 
 
    <div class="sub-child">Inside 1st child of 1st child 
 
    </div> 
 
    </div> 
 
    <div class="child">Inside 2nd child 
 
    <div class="sub-child">Inside 1st child of 2nd child</div> 
 
    <div class="sub-child">Inside 2nd child of 2nd child</div> 
 
    </div> 
 
    <div class="child"> 
 
    Inside 3rd child 
 
    <div class="sub-child">Insde 1st child of 3rd child</div> 
 
    </div> 
 
</div>

Answer 3

を子孫要素間で描くMDN

テキストの装飾に述べたように。つまり、 は、その祖先の1つに指定された のテキストデコレーションを子孫に対して無効にすることはできません。

残念ながら、あなたはできません。唯一の解決策は、ここに述べた他のものと同様に、対応するテキストをタグで包むことである。記載span

Answer 4

としてXPYは、これは不可能であり、通常のカスケード、あるいは!importantで上書きすることができないtext-decorationの制限があります。追加のマークアップ（spanのような）を追加したくない場合、唯一の他の選択肢は、境界線（テキストの長さだけでなく、div全体にまたがる）を使用してこの外観を偽ることです。

.parent > .child:first-of-type { 
     border-top:1px solid red; 
}