html - 如何使用 ID 定位表？

Question

我正在使用数据表并使用下面的 css 来隐藏表的标题。

table.dataTable thead {
    display: none;
}

现在发生的事情是我有两个表，id 分别为 userList1 和 userList2。

我想做的是仅将此 css 应用于 ID 为 userList1 的表。

知道如何完成这项工作吗？

我试过了

#userList1.table.dataTable thead {
    display: none;
}

#userList1 > table.dataTable thead {
    display: none;
}

但没有一个工作。

我不确定上面是对还是错，但我试过了。我是 CSS 新手。

---

HTML代码是

表一

<table id="userList" class="responsive dataTable" dir="LTR" style="width: 100%;border: 0px;" aria-describedby="userList_info">

表2

<table id="userList:2:userList2" class="responsive appointments" dir="LTR"></table>
<table id="userList:1:userList2" class="responsive appointments" dir="LTR"></table>
<table id="userList:0:userList2" class="responsive appointments" dir="LTR"></table>

注意:我有两个表..

表 1 和表 2 有内表...

所以我的表是

<table id="userList" class="responsive dataTable" dir="LTR" style="width: 100%;border: 0px;" aria-describedby="userList_info">

    <table id="userList:2:userList2" class="responsive appointments" dir="LTR"></table>
    <table id="userList:1:userList2" class="responsive appointments" dir="LTR"></table>
    <table id="userList:0:userList2" class="responsive appointments" dir="LTR"></table>

</table>

注意我使用的是 JSF 语言，内表 ID 是由 JSF 创建的...

JSFiddle Link

Answer 1

如果要隐藏外表的表头:

#userList thead {
  display: none;
}

如果你想隐藏内表的所有表头:

#userList table thead {
  display: none;
}

如果你想隐藏其中一个内表的表头，基于@steveax 的解决方案:

#userList #userList\:2\:userList2 thead {
  display: none;
}