时间戳

首页 > 解决方案 > 如何在css中为td内的特定元素设置样式

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

问题描述

示例：我想在我的 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 文件中设置该元素的样式

标签： htmlcsscss-selectors

解决方案

根据您的示例结构

.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>

推荐阅读