css 选择样式并将其更改为特定th或td

ndasle7k  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(97)

我是HTML和CSS的新手。我面临的问题是在特定的th或td行中更改字体。我将尝试在代码中解释。
如何使用CSS选择特定的表格单元格来改变样式,而不需要JavaScript,然后使用属性来放置样式。
代码:

<style>
    table, th, td {
      border: 3px solid white;
      border-collapse: collapse;
    }

    th, td {
      padding:10px;
    }
</style>
<body style="color:white;background-color:black">
<html>
    <table>
      <tr>
        <th>dummy</th>
        <th>dummy</th>
        <th>dummy</th>
        <th>dummy</th>
        <th>dummy</th>
        <th>dummy</th>
        <th>dummy</th>
        <th>dummy</th>
      </tr>
      <tr>
        <td>dummy</td>
        <td>dummy</td>
        <td>dummy</td>
        <td>dummy</td>
        <td>dummy</td>
        <td>dummy</td>
        <td>dummy</td>
        <td>dummy</td>
      </tr>
      <tr>
        <td>dummy</td>

<!--Part need to change style from this line--><td>dummy</td>

        <td>dummy</td>
        <td>dummy</td>
        <td>dummy</td>
        <td>dummy</td>
        <td>dummy</td>
        <td>dummy</td><!--to this line-->
      </tr>
    </table>

字符串
注解部分是选择特定的td,然后在最后一条注解处结束选择。
我已经使用了tbody标签,但它不起作用。Span和div标签也不起作用。
我怎么能改变的风格,从该部分或需要任何标签?

w9apscun

w9apscun1#

希望这能有所帮助。使用nth-child并学习如何将其用作选择器。

table,
th,
td {
  border: 3px solid white;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
}

body {
  color: white;
  background-color: black;
}

tr:nth-of-type(2) td:nth-of-type(2) {background:yellow; font-family: 'comic sans ms'}
tr:nth-of-type(2) td:nth-of-type(3) {background:pink; font-family: 'comic sans ms'}
tr:nth-of-type(2) td:nth-of-type(4) {background:blue; font-family: 'times new roman'}

个字符

pcrecxhr

pcrecxhr2#

您可以使用tr:last-child td:not(:first-child)选择器来定位最后一行中的表格单元格(第一个单元格除外):

tr:last-child td:not(:first-child) {
  background-color: #ff07;
}

table,
th,
td {
  border: 3px solid white;
  border-collapse: collapse;
}

body {
  color: white;
  background-color: black;
}

个字符

相关问题