Question

我有一个简单的HTML页面如下： -

<!DOCTYPE HTML>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
   <div id="div1">
      <form>
         <table>
            <tr>
            <td>Col1</td>
            <td>Col2</td>
            </tr>
         </table>
      </form>
   </div>
</body>
</html>

CSS是： -

div#div1 table,td {
    border: 1px solid black;
}

div#div2 table,td {
    border: none;
}

正如您所看到的，我的HTML中甚至没有使用div2，但是当我在浏览器中打开HTML文件时，这就是绘制表边框时生效的那个。不应该使用div1的border属性吗？更奇怪的是 - 如果我在CSS文件中将div＃div2移动到div＃div1之上，它可以正常工作。此外，如果我从CSS中完全删除div＃div2，它也可以工作。我傻了，错过了一些非常基本的东西吗？

谢谢！

Answer 1

div#div2 table,td

这是两个选择器，div#div2 table以及td。摆脱逗号。

div#div2 table td

或者，如果您要同时设置<table>和<td>的样式，则需要重复整个选择器。

div#div2 table, div#div2 td

Answer 2

试试这个

div#div1 table td {
border: 1px solid black;
}

div#div2 table td {
border: none;
}

您不需要逗号

基本的CSS DIV拼图

2 个答案: