如何在 css 中为 td 中的特定元素设置样式

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

您可以通过为元素定义 class 名称或 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>

样式.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>元素来设置特定元素的样式

我希望这能帮到您