преобразование текста не может быть изменено / перезаписано? (CSS) - PullRequest
Новая
       2

преобразование текста не может быть изменено / перезаписано? (CSS)

2 голосов
/ 05 мая 2010

Я изучаю css и не понимаю, почему какой-то ДРУГОЙ текст и строка 2 оказывает на них красное подчеркивание. Я думал, что я либо изменил его для других классов, либо сбросил его на none для класса line2

Я попробовал `text-ornament: none 'для .line2 и .others, а текст все еще был подчеркнут красным. 

    <html>
    <head>
    <style type="text/css">
    .line {color:red; text-transform:uppercase; text-decoration:underline;}

    .line2 {color:blue; text-transform:none;}

    .others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;}
    </style>
    </head>

    <body>
    <div class='line'>
        line 1
        <div class='others'><BR>some OTHER text<BR></DIV>
        <div class='line2'>
            <BR>line 2
        </div>
    </div>
    </body>
    </html>

Ответы [ 3 ]

3 голосов
/ 05 мая 2010

Сначала это кажется странным, но это поведение встроено в спецификацию CSS:

Это свойство не наследуется, но элементы должны соответствовать своим родителям. Например, если элемент подчеркнут, строка должна охватывать дочерние элементы. Цвет подчеркивания останется прежним, даже если у дочерних элементов будут разные значения «цвета».

См. http://www.w3.org/TR/REC-CSS1/#text-decoration.

Это своего рода специальное наследование, отличающееся от стандартного наследования CSS, поэтому его нельзя переопределить другими правилами, более конкретными селекторами или! Важным.

Полагаю, это потому, что эффекты оформления текста изначально были разработаны для применения к встроенным, а не блочным элементам. Представьте себе ссылку с промежутком внутри нее - для промежутка имеет смысл принять свойства оформления текста родительской ссылки.

На самом деле нет исправления без настройки HTML. Самый простой способ избежать этой проблемы - избегать установки декорирования текста для блоков (особенно для блоков-контейнеров, таких как <div class="line">). Я бы использовал что-то вроде: 

<html>
<head>
<style type="text/css">
.line {color:red; text-transform:uppercase; text-decoration:underline;}

.line2 {color:blue; text-transform:none;}

.others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;}
</style>
</head>

<body>
<div>
    <span class="line">line 1</span>
    <div class="others"><BR>some OTHER text<BR></DIV>
    <div class="line2">
        <BR>line 2
    </div>
</div>
</body>
</html>

Хорошая находка - всегда приятно узнавать что-то новое!

1 голос
/ 05 мая 2010

Используйте это вместо: 

<html>
   <head>
   <style type="text/css">
   .line .em {color:red; text-transform:uppercase; text-decoration:underline;}

   .line .line2 {color:blue; text-transform:none; text-decoration: none;}

   .line .others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;}
   </style>
   </head>

   <body>
   <div class='line'>
       <div class="em">line 1</div>
       <div class='others'><BR>some OTHER text<BR></DIV>
       <div class='line2'>
           <BR>line 2
       </div>
   </div>
   </body>
   </html>
0 голосов
/ 05 мая 2010

Попробуйте увеличить специфичность ваших селекторов 

div.others
div.item2
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...