Переопределить текстовое оформление на дочернем элементе

Я хочу переопределить родительский 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

Я не хочу использовать span. –

хорошо это разочаровывает, но это возможно только с тегом здесь аналогичный вопрос http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to -Работа/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

В хру указано, что это не возможно, и является ограничением text-decoration, которые не могут быть переопределены с нормальным каскаде или даже !important. Если вы не хотите добавлять дополнительную разметку (например, span), единственным вашим вариантом может быть подделка этого взгляда с помощью рамки (которая будет охватывать весь ваш div, а не только длину текста), например,

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

источник

2016-03-21 15:22:41 Angelique

Переопределить текстовое оформление на дочернем элементе

ответ

Смежные вопросы