Меню
Что нового?

Наследование стилей: text-decoration

sayber

Новичок
Наследование стилей: text-decoration

Если открыть этот код в браузере, то мы увидим слово "hello", подчеркнутое сверху и снизу.
Но я же переопределил свойство text-decoration для дочернего тега и слово "hello" должно быть подчеркнуто только сверху.

Вопрос: как сделать так, чтобы text-decoration не накладывался, а заменялся для дочерних тегов?

P.S. Отображается в Firefox, Opera и IE одинаково.

PHP: 
<html>
<head>
	<style type="text/css">
	DIV.sample {text-decoration: underline;}
	DIV.sample DIV {text-decoration: overline !important;}
	</style>
</head>
<body>
	<div class="sample">
		<div>hello</div>
	</div>
</body>
</html>
 

filipchuk

Новичок
может для DIV проще использовать border?

-~{}~ 14.12.07 12:14:

все правильно браузер показывает... пиши тогда
Код: 
<div class="sample" style="text-decoration:none">
        <div>hello</div>
    </div>
 

filipchuk

Новичок
Можна обернуть все еще в один ДИВ, хотя кажеться тут решение должно быть другое, слишком много букв для такой простой задачи - почему просто не сделать отдельный стиль который не будет зависить от контекст? :)

Код: 
DIV.sample0 DIV.samle {text-decoration: none;} 

<DIV class="sample0">
<div class="sample">
        <div>hello</div>
    </div>
</DIV>
 

@ndrey

Новичок
Вопрос: как сделать так, чтобы text-decoration не накладывался, а заменялся для дочерних тегов?
Нажмите для раскрытия...
никак, т.к. text-decoration не наследуется, так же как и border, background и некоторые другие.
Данное свойство влияет на все элементы следующего уровня. Т.е . в приведенном примере правило DIV.sample DIV не переопределяет родителя, а добавляет к нему (и к нижеследующим) новое оформление (!important вообще не причем).
 
Войдите или зарегистрируйтесь для ответа.
Сверху