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

我有两个不同ID的表，他们在不同的页面。单独来说，它们都很好，但是当我将它们包含在单个页面中时，虽然HTML元素的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; 
}

现在问题是每当我包括第一页pag e与第二个，第一个桌子得到一个边界。我在哪里设置border:none，为什么会发生这种情况？

来源

2017-02-20 Bappy

您是否仔细检查了输出HTML的有效性？这通常是一个开始的好地方。你可能重用了一个ID而没有意识到它。 – GordonM

更改这条线在你的CSS：

#userTable, th, td{

到

#userTable, #userTable th, #userTable td{

来源

2017-02-20 09:15:33 Mark

因为你给了一个全球性的风格，所有<th>和td元素使用明确的选择..它也加入一个th元素的边框，这就是为什么你的#logo表似乎有边框，因为你有一个th元素。

来源

2017-02-20 09:18:01

-1

@Mark是正确的。只是为了便于定义

th{ 
background-color: #a1aec4; 
}

也带有一个选择器，否则所有th将得到相同的颜色。

来源

2017-02-20 09:23:18 nitinkaushik19490

请不要使用回答留下评论 – GordonM

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

回答

相关问题