2

同じクラスのテーブルが2つあります

<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クラスpppagetitle(!)を持つものだけを選択したい-ポインタはありますか?

4

7 に答える 7

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

しかし、これは十分にサポートされていません(IE8以下では機能しません)

または、テーブルをコンテナに入れて使用します

:第一子

例:

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

その他のドキュメント:Quirksmode.org

于 2012-10-13T17:43:35.107 に答える
1

彼らが親を共有していると仮定すると、私の最初の考えは次のようになります。

table.pp:first-child

JSフィドルデモ

ただし、これは、親要素の最初の子である場合にのみ、特定の(そのクラスを含む)を選択します。table

:first-of-class()セレクターはありません(残念ながら)。

于 2012-10-13T17:23:18.980 に答える
0

別のクラスを追加して、必要なテーブルのみを選択できます。

<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>
于 2012-10-13T17:22:31.893 に答える
0

table.pp:first-child

ie7+でサポート

于 2012-10-13T17:24:37.493 に答える
0

使用できます

table.pp:first-child

また

table.pp:nth-of-type(1)
于 2012-10-13T17:24:52.050 に答える
0

:first-child疑似セレクターを使用できます

于 2012-10-13T17:25:26.623 に答える
0

@Jason Groulxの以前の投稿へのポインタと、この問題に関する非常に精巧な回答により、私は問題を解決しました。

<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>
于 2012-10-13T19:02:07.207 に答える