как мне изменить свойство css только для одной строки с пользовательским классом, не удаляя стили из других строк?

#html #css

#HTML #css

Вопрос:

http://codepen.io/louisverdiguel/pen/vCJFh

я здесь впервые, надеюсь, я все делаю правильно.

HTML

Я создал строку строк и столбцов с помощью html, чтобы клиент «напоминал» электронную таблицу.

CSS

Я создал класс css class=»sale td» внутри класса.

 .sale td {border: 1px solid grey; }

чтобы для каждой строки отображалась граница

проблема: я хотел бы удалить границу из любого <tr> , который содержит <h2> тег

как мне создать такой конкретный класс или действие с помощью CSS и как называется этот метод?

1. вы имеете в виду, что если тег <a> есть, вы хотите удалить границу для этой строки?

2. итак, путь выбора выглядит так td ->> a ->> td ->> remove border , что это, очевидно, путь назад / вверх, CSS не может работать таким образом (переход назад от дочернего элемента (в данном случае) или обратно к предыдущим братьям и сестрам (в другом случае)).

Ответ №1:

Вы можете попробовать так: ССЫЛКА

CSS:

 .sale tr.no_border td {
    border: 0px !important;
}

HTML:

 <tr class="no_border">
  <td colspan="3" align="left" valign="top"><h2>Bottles</h2></td>
</tr>

Ответ №2:

Вы можете только попытаться добавить style тег к каждой строке, для которой вы хотите удалить границу. Например:

 <td colspan="4" align="left" valign="top" style="border:none;">

Ответ №3:

Вы не можете вернуться назад, как это, устанавливая стили для тега на основе тегов внутри него. Для этого вы должны пометить tr / td классом, если он содержит a h2 .

Редактировать: пример.

CSS

.noborder {граница: нет !важно}

«!important» гарантирует, что он переопределяет другой стиль CSS.

HTML

<td class="noborder">

Edit2: Также «.sale td» в вашем CSS означает любой <td> внутри блока (в данном случае таблицы) с классом «sale». Таким образом, вы не устанавливаете класс «sale td» на своем <table> , а просто «sale»

Ответ №4:

 For every row you can use this css:

    .sale td {border: 1px solid grey; }

    but for the rows with <h2> in it:

    .sale tr.no-border td {
        border: 0px !important;
    }

    and your html will look like:

    <tr class="no-border">
      <td colspan="3" align="left" valign="top"><h2>Heading</h2></td>
    </tr>