包装器表tr td，但你已经将它作为#wrapper th，td选择了包装器中的所有元素以及包装器和外部的所有td

Question

我有一个div #divWrapper，其中包含一个.innerTable表TD和TR s。我希望所有TD sddd #drapper都有边界崩溃：崩溃和边框：1px纯黑色。

我的印象是

#divWrapper td {
   border-collapse: collapse;
   border: 1px solid black;
}

应该做的伎俩，但显然选择器的td部分将全局应用，因此所有没有其他直接选择器的TD也会收到CSS。

有没有办法像我想象的那样构建一个选择器？

<div id="divWrapper ">
   <table>
    <tr>
     <td>want border</td>
    </tr>
   </table>
</div>

<div>
   <table>
    <tr>
     <td>borderless</td>
    </tr>
   </table>
</div>

编辑摆弄实际问题 https://jsfiddle.net/ancientsion/sLt7m5nd/

Answer 1

问题出在您的标记上。您的身份证后有空格，这会弄乱一切

#divWrapper table tr td {
   border-collapse: collapse;
   border: 1px solid black;
}

<div id="divWrapper">
   <table>
    <tr>
     <td>want border</td>
    </tr>
   </table>
</div>

<div>
   <table>
    <tr>
     <td>borderless</td>
    </tr>
   </table>
</div>

你解决了小提琴中提到的问题。如果你只想在#wrapper中选择那些td，那么它应该是

包装器表tr td，但你已经将它作为#wrapper th，td选择了包装器中的所有元素以及包装器和外部的所有td

检查以下解决方案

#wrapper table th,#wrapper table td {
  border: 1px solid black;
}

<div id=wrapper>
  <table>
    <tr>
      <th>

        header1

      </th>
      <th>

        header2


      </th>
    </tr>

    <tr>
      <td>
        One
      </td>
      <td>
        two
      </td>
    </tr>
    <tr>
      <td>
        line2
      </td>
      <td>
        cell 2
      </td>
    </tr>
  </table>
</div>

<br>
<br>

<table>
  
    <th>
      TH
    </th>
  <tr>
    <td style="color: red;">
      TD
    </td>
  </tr>
</table>

希望这能让你明白供更多参考 http://www.w3schools.com/cssref/css_selectors.asp

Answer 2

这是你的css选择器正常工作的一个工作示例。一个有边框，一个没有边框。我纠正了一些拼写错误。

<html>
<head>
    <style>
    #divWrapper td {
        border-collapse: collapse;
        border: 1px solid black;
        background-color:red;
    }
    </style>
</head>
<body>

<div id="divWrapper">
<table>
    <tr>
    <td>want border</td>
    </tr>
</table>
</div>

<div>
<table>
    <tr>
    <td>borderless</td>
    </tr>
</table>
</div>

</body>
</html>

CSS选择器：ID或类选择器中的常规HTML元素？

2 个答案:

包装器表tr td，但你已经将它作为#wrapper th，td选择了包装器中的所有元素以及包装器和外部的所有td