代码之家 › 专栏 › 技术社区 › Eugene

如果元素包含特定类型的子元素,如何使用CSS选择器来消除该元素

css html

Eugene · 技术社区 · 6 年前

让我举个例子来澄清我的问题。

假设我有一个如下表:

<table>
  <tr>
    <th>header1</th>
    <th>header2</th>
  </tr>

  <tr>
    <td>elem1</td>
    <td>elem2</td>
  </tr>

  <tr>
    <td>elem3</td>
    <td>elem4</td>
  </tr>
</table>

我想显示包含 <td> 元素是可单击的,所以当鼠标指针悬停在 <tr> 包含 <td> 要素

我可以通过如下方式设置样式:

table tr:not(:first-child) {cursor:pointer;}

表的第一个子项通常是 <tr> 包含 <th> 。

问题来了,如何编写css样式来消除 <tr> 包含 <th> 作为直接的孩子,用更直观的方式?

5 回复 | 直到 6 年前

Douwe de Haan 6 年前

利用 thead 和 tbody 元素,然后使用CSS仅针对 表格主体 :

table tbody tr {
  cursor: pointer;
}

<table>
  <thead>
    <tr>
      <th>header1</th>
      <th>header2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>elem1</td>
      <td>elem2</td>
    </tr>
    <tr>
      <td>elem3</td>
      <td>elem4</td>
    </tr>
  </tbody>
</table>

VXp Kadir BuÅ¡atliÄ 6 年前

tr td {cursor: pointer} 很好:

tr td {cursor: pointer}

<table>
  <tr>
    <th>header1
    <th>header2
  </tr>
  <tr>
    <td>elem1
    <td>elem2
  </tr>
  <tr>
    <td>elem3
    <td>elem4
  </tr>
</table>

或者只是 td {cursor: pointer} 也很好。

AmbroÅ¼y 5 年前

您还可以使用CSS伪类:

它将从表中的第二行到最后一行进行选择。

table tr:nth-child(n+2) {
   cursor: pointer;
}

<table> 
   <tr>
     <th>header1</th>
     <th>header2</th>
   </tr> 
   <tr class="editable">
     <td>elem1</td>
     <td>elem2</td>
   </tr>
   <tr class="editable">
     <td>elem3</td>
     <td>elem4</td>
   </tr> 
</table>

AmbroÅ¼y 5 年前

您可以将类添加到可编辑的tr中:

tr.editable {
  cursor: pointer;
}

<table> 
   <tr>
     <th>header1</th>
     <th>header2</th>
   </tr> 
   <tr class="editable">
     <td>elem1</td>
     <td>elem2</td>
   </tr>
   <tr class="editable">
     <td>elem3</td>
     <td>elem4</td>
   </tr> 
</table>

-3

GGO 6 年前

你可以简单地引用所有 tr 作为他们的孩子 <td> 它将自动忽略 tr公司 具有 <th> 标签

 table tr td {
    cursor:pointer;
 }

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前