0

我在另一个表中有一个 HTML 表。两个表格的样式都在 CSS 中定义。我想要具有不同边框颜色的内表和外表。但不知何故，内表正在采用外表的边框颜色。下面是代码 -

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="common.css">
</head>
<body>
    <table width="100%" class="OuterTableStyle1"><tr><td>
    <table width="100%" class="CommonTableStyle1" >
            <tr>
                <th>Title 1</th>
                <th>Title 2</th>
            </tr>
            <tr>
                 <td>Data 1</td>
                 <td>Data 2</td>
            </tr>
    </table>
    </td></tr></table>
</body>
</html>

CSS：

/*======= Start : Common data table style =========*/
table.CommonTableStyle1 td
   {
   vertical-align:middle;
   padding:5px;
   font-size:11px;
   font-family:Arial;
   font-weight:normal;
   color:#000000;
   }

table.CommonTableStyle1 th, table.CommonTableStyle1 td
   {
   border: 1px solid #525272    ;
   }

table.CommonTableStyle1
   {
   border-collapse:collapse;
   }
/*======= End : Common data table style =========*/


/*=== Start : This table is used as border of another scrollable table ===*/
table.OuterTableStyle1 
   {
   border-collapse:collapse;
   }
table.OuterTableStyle1 th, table.OuterTableStyle1 td
   {
   border: 1px solid red;
   }
/*=== End : This table is used as border of another scrollable table ===*/

请帮忙。

[编辑的 CSS]

/*======= Start : Common data table style =========*/
table.CommonTableStyle1 td
   {
   vertical-align:middle;
   padding:5px;
   font-size:11px;
   font-family:Arial;
   font-weight:normal;
   color:#000000;
   }

table.CommonTableStyle1 th, table.CommonTableStyle1 td
   {
   border: 1px solid #525272    ;
   }

table.CommonTableStyle1
   {
   border-collapse:collapse;
   }
/*======= End : Common data table style =========*/


/*=== Start : This table is used as border of another scrollable table ===*/
table.OuterTableStyle1 
   {
   border-collapse:collapse;
   border: 1px solid red;
   }
/*=== End : This table is used as border of another scrollable table ===*/
4

1 回答 1

3

选择器

table.CommonTableStyle1 table, th, td

不能正常工作，因为表中没有“CommonTableStyle1”类的表。

我认为您打算这样做：

table.CommonTableStyle1 th, table.CommonTableStyle1 td

见小提琴

此外，最底部的选择器确实有效，但不是您想象的那样。该th, td部分具有与上述相同的特异性，因此所有ths 和tds 都将采用这种样式，因为这个是后来出现的。但是现在可以了，因为我们已经将上述的特异性放大了。

于 2013-07-27T11:37:32.537 回答