Question

示例：我想在style.css文件中设置该元素的样式

  <table>
     <thead>...</thead>
     <tbody id="something">
        <tr class="highlight_on_hover" id="1">
           <td>Data 1</td>
           <td>Data 2</td>
           <td>Data 3</td>
           <td>
                <a href="#">Link</a>
                <a href="#">The element I want to style.</a>
           </td>
        </tr>
        <tr class="highlight_on_hover" id="2">
           <td>Data 1</td>
           <td>Data 2</td>
           <td>Data 3</td>
           <td>
                <a href="#">Link</a>
                <a href="#">The element I want to style.</a>
           </td>
        </tr>
     </tbody>

   <table>

我想使用CSS选择器为style.css文件中的元素设置样式

Answer 1

根据您的示例结构

.highlight_on_hover td a:nth-child(2)

将完成它。

.highlight_on_hover td a:nth-child(2) {
  background: lightblue;
}

<table>
  <tbody id="something">
    <tr class="highlight_on_hover" id="1">
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>
        <a href="#">Link</a>
        <a href="#">The element I want to style.</a>
      </td>
    </tr>
    <tr class="highlight_on_hover" id="2">
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>
        <a href="#">Link</a>
        <a href="#">The element I want to style.</a>
      </td>
    </tr>
  </tbody>

  <table>

Answer 2

您可以通过为元素定义类名或id来设置特定元素的样式。

<tr class="highlight_on_hover" id="1">
           <td>Data 1</td>
           <td>Data 2</td>
           <td>Data 3</td>
           <td>
                <a href="#" >Link</a>
                <a href="#" class="link">The element I want to style.</a>
           </td>
</tr>

style.css

  .link {
        color: blue;
        text-decoration: underline;
      }

Answer 3

如果您要设置所有<td>标签的样式，请添加CSS

table td{ color:red; font-weight:bolder;}

此CSS将为您表格中的所有数据设置样式

或者如果您想设置特殊的<td>元素的样式，请尝试

<table>
<tbody id="something">
        <tr class="highlight_on_hover" id="1">
           <td> <span style="color:red;"> Data 1 </span></td>
           <td>Data 2</td>
           <td>Data 3</td>
           <td>
                <a href="#">Link</a>
                <a href="#">The element I want to style.</a>
           </td>
</tbody> </table>

使用<span>元素设置特殊元素的样式

我希望这会对您有所帮助

如何在CSS中的TD内设置特定元素的样式

3 个答案: