Question

我有两个具有不同ID的表，它们位于不同的页面中。单独地它们很好，但是当我将它们包含在单个页面中时，样式是重叠的，尽管HTML元素的ID是不同的。以下是我的代码：

<head>

<rel="Stylesheet" href="CSS/styles.css">

</head>

<body>
<table id="logo" style="width:100%">
    <th><img src="Image/vg_logo.png" style="width:150px;height:100px"></th>
</table>
</body>

上述代码的样式是：

#logo{
border: none;   
}

，另一个元素代码是：

    $query="select * from users order by id";
            $result=mysqli_query($con,$query);
            echo '<table id="userTable"><tr><th>User ID</th><th>Full Name</th><th>User Name</th><th>User Role</th></tr>';

            while ($row=mysqli_fetch_array($result))
            {
                echo '<tr><td>'.$row['id'].'</td><td>'.$row['userFullName'].'</td><td>'.$row['userName'].'</td><td>'.$row['type'].'</td></tr>';
            }
            echo '</table>';

和风格是：

#userTable{
float:right;
width: 550px;   
}
#userTable, th, td{
border: 1px solid black;
border-collapse: collapse;
font-family:tahoma;
font-size:14px;
}

th{
background-color: #a1aec4;
}

现在的问题是每当我将第一页包含在第二页时，第一个表就会出现边框。在我设置border:none的地方，为什么会发生这种情况？

Answer 1

在css中更改此行：

#userTable, th, td{

到

#userTable, #userTable th, #userTable td{

Answer 2

因为您为所有<th>和td元素提供了一个全局样式，特定于您的选择器..它还为th元素添加了边框，这就是为什么你的#logo表似乎有边框，因为你有一个th元素。

Answer 3

@Mark是正确的。仅供注释定义

th{
background-color: #a1aec4;
}

还有一个选择器，否则所有人都会得到相同的颜色。

为什么不同的HTML ID具有相同的风格？

3 个答案: