时间戳

首页 > 解决方案 > CSS 类适用于表格内部，但不适用于表格本身

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

问题描述

以下是一个简单的 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">

好的

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

标签： htmlcss

解决方案

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

推荐阅读