Question

以下是一个简单的CSS代码，但是我无法弄清楚为什么它不起作用。

<!DOCTYPE html>
<html>
<head>
<style>
.border-on * {
    border: 1px solid black;
}
</style>
</head>
<body>
  <table class="border-on">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
  </table>
  </body>
</html>

CSS样式适用于td和th，但不适用于表格！表格看起来像这样

当我再次向表选择器添加相同样式时，效果很好

<table class="border-on" style="border: 1px solid black">

我有不同的表，所以我需要使用类来定义每个表。

Answer 1

*是一个通用选择器，代表“所有子代”，但不表示对象本身。我修改了CSS，使其包含表格本身。

.border-on,
.border-on * {
    border: 1px solid black;
}

  
  <table class="border-on">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
  </table>

Answer 2

在CSS中使用*选择器将获取所有子元素，而不是选定的所有子元素。这是默认行为

CSS类适用于表内部，但不适用于表本身

2 个答案: