如何使用自定义类仅更改一行的css属性而不删除其他行中的样式？

Question

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

这是我第一次来这里，我希望我做得对。

的 HTML

我创建了一个带有html的行和列字符串，以便客户端“类似”电子表格。

的 CSS

我创建了一个css类class =“sale td” 在课堂上。

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

为每一行设置边框

  

问题：我想删除包含<tr>标记的任何<h2>的边框

我将如何使用CSS创建这样一个特定的类或动作？这个方法叫做什么？

Answer 1

您可以尝试这样做： LINK

<强> 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>

Answer 2

你不能像基于其中的标签那样设置标签样式。如果tr / td包含h2，则必须使用该类对其进行标记。

编辑： 一个例子。

CSS

.noborder {border：none！important}

“！important”确保它覆盖其他CSS样式。

HTML 的

<td class="noborder">

EDIT2： CSS中的“.sale td”表示块内的任何<td>（本例中为表格），带有“sale”类。所以你没有在你的<table>上设置“sale td”类 - 而只是“促销”

Answer 3

您只能尝试将style标记添加到要删除边框的每一行。 例如：

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

Answer 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>