我在另一个表中有一个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 ===*/
答案 0 :(得分:3)
选择器
table.CommonTableStyle1 table, th, td
无法正常工作,因为表中没有带“CommonTableStyle1”类的表。
我认为你打算这样做:
table.CommonTableStyle1 th, table.CommonTableStyle1 td
请参阅fiddle
此外,最底层的选择器确实有效,但不是你想象的方式。 th, td
部分具有与上述部分相同的特异性,因此对于所有th
和td
s采用此样式,因为这个样式稍后出现。但是现在没关系,因为我们已经将上述特异性提高了。