CSS: удалить подчеркивание из текста

Question

У меня есть следующий HTML

<div style="text-decoration: underline;"> 
    outer text 
    <div style="text-decoration: none;">inner text</div> 
</div> 

Даже если я не использовал «нет» на «внутренний текст», он по-прежнему подчеркнуты. Вот пример скрипта JS: http://jsfiddle.net/oj2wj1d6/1/

Как удалить подчеркивание из «внутреннего текста»? Я должен поддерживать ту же структуру HTML, не добавляя никаких новых тегов HTML.

Answer 1

Вид Hacky, но с помощью селектора ::first-line psueduo, он применяет стиль к «первой линии» только поэтому в приведенном ниже примере я использовал элемент (p), чтобы сломать текст и вызвать действие.

Это, конечно, предполагается, что единственный текст, который вы хотите подчеркнуть, - это первая строка вашего контента. пусть покупатель будет бдителен, YMMV и т.д.

example on JSFiddle.net

HTML:

<div class="first-line-underline"> 
    outer text a sentence 
    wut 
    yea 
    <p>inner text</p> 
</div> 

CSS:

.first-line-underline::first-line { 
    text-decoration: underline; 
} 

text-decoration on Mozilla Developer Network ::first-line on Mozilla Developer Network

Answer 2

Это фактически определяется поведение в the spec:

Текст украшения рисовать по узлам. Это означает, что невозможно отключить на потомок текстовое украшение, указанное на одном из его предков.

Подробнее на https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration