覆蓋子元素上的文本修飾

我想覆蓋子元素中的父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>

來源

2016-03-21 Padhy Akash

請澄清您的具體問題或添加其他詳細信息以突出顯示您的需要。正如目前所寫，很難確切地說出你在問什麼。 –

你可以通過這樣的

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; 
}

來源

2016-03-21 13:07:55

我不想使用跨度。 –

以及這是令人失望的，但它只可能與一個標記這裏是一個類似的問題http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to -work/1823388＃1823388 –

在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>

來源

2016-03-21 13:23:35 Jai

正如MDN

文本修飾陳述跨後代元素繪製。這意味着它不可能在後代上禁用在其祖先中指定的的文本裝飾。

因此，不幸的是，你不能。正如其他人所說的，唯一的解決方法是用一個標籤來包裝相應的文本，例如，一個span

來源

2016-03-21 15:14:25 xpy

作爲XPY說明，這是不可能的，並且是不能與正常級聯或者甚至!important覆蓋的text-decoration的限制。如果你不願意添加額外的標記（如span），唯一的其他選擇可能是通過使用邊框（這將跨越整個div，而不僅僅是文本的長度）僞造此外觀，例如，

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

來源

2016-03-21 15:22:41 Angelique

覆蓋子元素上的文本修飾

回答

相關問題