Question

我有两个具有相同类别的表

<table class='pp' >
  <tr class='pp'>
    <td class='pppagetitle'>A Table</td>
  </tr>
</table>
<table class='pp' >
  <tr class='pp'>
    <td class='ppinstance'>Another Table</td>
  </tr>
</table>

但是只想选择带有td class pppagetitle（！）的那个 - 任何指针？

Answer 1

.pp:nth-child(1){background:green;}

但是这不受支持（在IE8及以下版本中不起作用）

或者将表放在容器中并使用

:first-child

示例：

<style>
    .container > .pp:first-child{background:green;}
</style>
<div class="container">
    <table class="pp"></table>
    <table class="pp"></table>
</div>

了解更多文档：Quirksmode.org

Answer 2

我的第一个想法，假设他们共享父母，将是：

table.pp:first-child

JS Fiddle demo

但是，如果它是其父元素的第一个子元素，那么可以，只选择特定的table（带有该类）。

没有:first-of-class()选择器（不幸的是）。

Answer 3

您可以添加另一个类，只选择所需的表：

<table class='pp' >
  <tr class='pp'>
    <td class='pppagetitle anotherClass'>A Table</td>
  </tr>
</table>
<table class='pp' >
  <tr class='pp'>
    <td class='ppinstance'>Another Table</td>
  </tr>
</table>

Answer 4

table.pp:first-child

ie7 +

支持

Answer 5

您可以使用

table.pp:first-child

或

table.pp:nth-of-type(1)

Answer 6

您可以使用:first-child伪选择器

Answer 7

@Jason Groulx关于这个问题的前一篇文章非常elaborate answer的指针解决了我的问题：

<style type="text/css">
.pp > .pppagetitle {
    border: 1px solid red;
}
</style>

<table class='pp' >
  <tr class='pp'>
    <td class='pppagetitle'>A Table</td>
  </tr>
</table>
<table class='pp' >
  <tr class='pp'>
    <td class='ppinstance'>Another Table</td>
  </tr>
</table>

具有特定TD的表的CSS选择器

7 个答案: