Как я могу заставить это переопределение украшения текста CSS работать?

Иногда я клянусь, что схожу с ума. Это один из тех дней. Я думал, что мой CSS здесь довольно прост, но, похоже, он не работает. Что мне не хватает?

Мой CSS выглядит так:

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

И мой HTML выглядит так:

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

И все же это выглядит так:

Образ

Источник

7 ответов

Решение

text-decoration не ведет себя так же, как другие стили шрифта / текста, связанные с font-weight, применение text-decoration также повлияет на все вложенные элементы.

Проверьте это: http://www.w3.org/TR/CSS21/text.html

Выдержка:

Текстовые украшения на встроенных прямоугольниках рисуются по всему элементу, проходя через любые элементы-потомки, не обращая внимания на их наличие. Свойство text-художественное оформление на дочерних элементах не может влиять на оформление элемента.
,,,,
Некоторые пользовательские агенты реализовали оформление текста, распространяя оформление на элементы-потомки, а не просто рисуя оформление через элементы, как описано выше. Это было возможно разрешено более свободной формулировкой в ​​CSS2.

Я получил информацию от: http://csscreator.com/node/14951

Источник

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

  • Элементы вне потока, такие как плавающие и абсолютно позиционированные

    li {
  float: left; /* Avoid text-decoration propagation from ul */
  clear: both; /* One li per line */
}
ul { overflow: hidden; } /* Clearfix */


    ul {
  overflow: hidden; /* Clearfix */
}
li {
  float: left; /* Avoid text-decoration propagation from ul */
  clear: both; /* One li per line */
}
li.u {
  text-decoration: underline;
}
    <ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

  • Атомарные элементы на уровне строки, такие как встроенные блоки и встроенные таблицы

    Но если вы используете li{display:inline-block} тогда у вас нет пуль (вы теряете display:list-item) и элементы появляются рядом с другими.

    Затем, чтобы иметь один элемент в строке, вы можете использовать

    li {
  display: inline-block; /* Avoid text-decoration propagation from ul */
  width: 100%;           /* One li per line */
}

    И чтобы добавить пули, вы можете использовать ::before псевдо-элементы. Однако, пули не должны быть подчеркнуты, так что вам нужно будет вывести их из потока или сделать их атомарными.

    li {
  display: inline-block; /* Avoid text-decoration propagation from ul */
  width: 100%;           /* One li per line */
}
li:before {
  content: '• ';         /* Insert bullet */
  display: inline-block; /* Avoid text-decoration propagation from li */
  white-space: pre-wrap; /* Don't collapse the whitespace */
}
li.u {
  text-decoration: underline;
}
    <ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

    li {
  display: inline-block; /* Avoid text-decoration propagation from ul */
  width: 100%;           /* One li per line */
}
li:before {
  content: '•';          /* Insert bullet */
  position: absolute;    /* Avoid text-decoration propagation from li */
  margin-left: -.75em;
}
li.u {
  text-decoration: underline;
}
    <ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

Это поведение указано в CSS 2.1 и модуле оформления текста CSS уровня 3:

Обратите внимание, что текстовые декорации не распространяются ни на потомков вне потока, ни на содержимое атомарных потомков встроенного уровня, таких как встроенные блоки и встроенные таблицы.

Источник

Причина, по которой вы видите то, что вы видите, в том, что ваше правило

ul > li.u

предпочитает:

ul > li > ul > li

как класс указан, и он имеет больший вес, чем селекторы элементов вместе.

Редактировать: что вы можете попробовать это:

.u ul {
        text-decoration: none;
}
.u {
        text-decoration: underline;
}

и поиграйте с этим (возможно, вам придется использовать li.u вместо просто .u).

Однако, в зависимости от содержимого, вам может потребоваться заключить подчеркнутые части в теги q, em или strong и стилизовать эти теги вместо использования класса. Таким образом, вы будете описывать свой контент, а также стилизовать его.

Источник

Ответ okw выше прекрасно объясняет, почему вы не можете делать то, что просите, без каких-либо других изменений. Нет, ты не сходишь с ума!

Возможные обходные пути:

  • пытаться border-bottom?
  • оберните текст, который вы хотите подчеркнуть в span class="u" тег? (чтобы текстовое оформление не украшало вложенные элементы)
  • если вы не можете изменить разметку, вы можете добавить некоторые сценарии, чтобы выполнить то же самое, что и мое предыдущее предложение.

Удачи!

Источник

Самый чистый подход, который я нашел, - это просто установить подчеркивание в цвет фона.

Источник

У меня возникла аналогичная проблема при использовании внешней темы /CSS, поэтому я не мог изменить ее, чтобы удалить text-decoration: none;. В моем случае у меня был дочерний элемент со ссылкой, но ссылка не была подчеркнута, как ожидалось. Я пробовал использовать display: inline-block; как упоминали другие, но это не имеет никакого эффекта.

Что сработало для меня, так это переопределение text-decoration как и вы, но в том числе !important чтобы заставить его переопределить родительский text-decoration.

// Defined in an external CSS, so I couldn't modify it.
.footer {
    text-decoration: none;
}

// In my CSS file.
.footer a {
    text-decoration: underline !important;
}

Итак, для вашего конкретного примера, я полагаю, это может помочь (я не тестировал его, чтобы подтвердить):

ul > li > ul > li {
    text-decoration: none !important;
}
Источник 
.u {text-decoration: underline;}
Источник
Другие вопросы по тегам