时间戳

首页 > 解决方案 > 内的 CSS

标签

html - 内的 CSS
标签

问题描述

我正在参加在线课程并学习 javascript、html5 和 CSS。我在使用我的 css 文件格式化我的表格时遇到问题。它位于 DIV 标签内：

<div data-role="main" class="ui-content">

我正在尝试使用我的 CSS：

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

我尝试做 .ui-content table th, td {} 并且什么也没做，我尝试了其他一些，但我仍然坚持下去。任何帮助将不胜感激。谢谢

标签： htmlcss

解决方案

当元素之间有空格时，您定位该元素的子元素，而当您有逗号时，您定位多个元素。

在您的情况下，为了能够对 应用边框th，您需要执行以下操作：tdtable

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

但是，如果您想将 css 应用于元素的内部th和td内部，table则需要执行

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

使用您拥有的 html

<div data-role="main" class="ui-content">
    <table>
        <tr>
          <th>Grade</th>
          <th>Numeric Equivalent</th>
          <th>Explanation</th>
        </tr>
        <tr>
          <td>A</td>
          <td>95-100</td>
          <td><strong>Excellent.</strong></td>
        </tr>
    </table>
</div>

你的CSS应该是

table { border-collapse: collapse; }
table th { border: 1px solid black; }
table td { border: 1px solid black; }

推荐阅读