CSS Line-Through не удаляется - PullRequest
Новая
       28

CSS Line-Through не удаляется

7 голосов
/ 18 ноября 2009

У меня есть некоторый код, который помещает сквозную строку в TR для удаленных строк, но это означает, что страдают мои кнопки в столбце «Действия» (которые только есть). Это связано с тем, что между кнопками есть отдельные пробелы, которые также могут проходить через строку.

После изучения W3Schools меня удивляет, почему этот пример не работает: 

<html>
  <head>
  <style type="text/css">

    tr {text-decoration:line-through}
  </style>
  </head>

  <body>
    <table>
      <tr>
        <td>this needs to be line-throughed</td>
        <td style="text-decoration: none !important;">This shouldn't be line-throughed.</td>
      </tr>
    </table>
  </body>
</html>

Как я могу очистить проход через дочерние элементы?

EDIT Я обновил свой пример - проблема в том, что я не хочу снимать стиль с родительского элемента, только с одного дочернего элемента.

Ответы [ 6 ]

1 голос
/ 18 ноября 2009

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

РЕДАКТИРОВАТЬ: учитывая ваш пример, почему бы просто не применить линейный переход к элементам TD индивидуально 

<html>
  <head>
  <style type="text/css">

    td.deleted {text-decoration:line-through}
  </style>
  </head>

  <body>
    <table>
      <tr>
        <td class="deleted">this needs to be line-throughed</td>
        <td>This shouldn't be line-throughed.</td>
      </tr>
    </table>
  </body>
</html>
0 голосов
/ 24 октября 2015 
<td style="text-decoration: none>

Это работает, если только вы не пытаетесь распаковать ссылку на URL.

Тогда эта фраза также побеждает ссылку.

0 голосов
/ 18 ноября 2009

Попробуйте 

<html>
  <head>
  <style type="text/css">

    tr td {text-decoration:line-through;}
    tr td.noline { text-decoration:none;}

  </style>
  </head>

  <body>
    <table>
      <tr>
        <td>this needs to be line-throughed</td>
        <td class="noline">This shouldn't be line-throughed.</td>
      </tr>
    </table>
  </body>
</html>

Обратите внимание, что стиль "tr td" для обоих.

0 голосов
/ 18 ноября 2009

Один из способов исправить это - изменить 

tr {text-decoration:line-through}

до 

tr td {text-decoration:line-through}

В результате сквозной ввод находится в отдельной ячейке таблицы, а не во всей строке. Это позволяет вам указать другой стиль в одной ячейке.

Кстати, проблема, кажется, не существует с примером кода, который вы дали на IE5.5 +. Однако в FF3.5 пример ведет себя так, как вы объяснили. Я не уверен, что такое правильное поведение.

0 голосов
/ 18 ноября 2009

Линейный проход применяется к H2, поэтому вы должны снять его с H2. 

<html>
  <head>
  <style type="text/css">

    h2 {text-decoration:line-through}
    h2.alt { text-decoration: none; }
    h2.alt span { border: 1px solid black; }
  </style>
  </head>

  <body>
    <h2>Line-through</h2>
    <h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2>
  </body>
</html>

(Просмотр здесь: http://jsbin.com/anopa/)

Дочерний элемент (span) не может влиять на стиль родителя (h2), к которому применяется стиль. Вы должны изменить, где стиль был применен первоначально.

Редактировать: обновленный пример

0 голосов
/ 18 ноября 2009

Для этого не нужно использовать важные или встроенные стили. Попробуйте 

h2 {text-decoration:line-through;}
h2 span {text-decoration: none; border: 1px solid black;}

EDIT

В этом случае с tr, так как да, вы применили к нему текстовое оформление, вы должны снять текстовое оформление с того же элемента tr, а не td. В противном случае: 

tr td { text-decoration: whatever }

и затем при необходимости 

<td style="text-decoration: none;"></td>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...