Question

我对HTML表格有些麻烦。我的表如下所示：

<table class="shop_table cart" cellspacing="0">
<thead>
    <tr>
        <th class="product-remove">&nbsp;</th>
        <th class="product-thumbnail">&nbsp;</th>
        <th class="product-name">Produkt</th>
        <th class="product-price">Preis</th>
        <th class="product-quantity">Anzahl</th>
        <th class="product-subtotal">Summe</th>
    </tr>
</thead>
<tbody>
...
</tbody>
</table>

现在我想用CSS定义我的<th>所有类都得到border-bottom{1px solid black;}。重要的是，只有带有类的<th>被设置样式，因为我<td>具有相同的类，并且它们不应该获得边框。我希望你能理解我。

Answer 1

这是非常基本的，只需使用你的th标签与类选择器紧跟在......所以它看起来像......

    th.product-remove,
    th.product-thumbnail,
    th.product-name,
    th.product-price,
    th.product-quantity,
    th.product-subtotal {
        border-bottom:1px solid #000;
    }

Answer 2

th
{
   /* add your styling here */
}

或限制特定班级：

th.class-name
{
   /* add your styling here */
}

Answer 3

您可以指定只有以“product-”开头的类才会有边框底部

th[class^='product-'] {
    border-bottom: 1px solid #000;
}

Answer 4

uncoder写道：

或限制特定班级：

th.class-name { /* add your styling here */ }

虽然如果你想用一个选择器使用类名来选择所有的th，你可以这样做： th[class*='product-'] { border-bottom: 1px solid black; }

Answer 5

另一种可能性是为要设置样式的元素添加一个特殊类，如下所示：

<th class="product-remove product-bordered">&nbsp;</th>
<th class="product-thumbnail product-bordered">&nbsp;</th>
<th class="product-name product-bordered">Produkt</th>
<th class="product-price product-bordered">Preis</th>
<th class="product-quantity product-bordered">Anzahl</th>
<th class="product-subtotal product-bordered">Summe</th>

//CSS
.product-bordered {
   border-bottom: 1px solid #000;
}

但是在一天结束时，如果你写了一个特殊的课程，那么你的决定就是你的决定，其他答案也有很好的解决方案。

来自德国的问候

CSS中的类的样式

5 个答案: