use：non-firstに変更する内容の擬似要素<thead><th>要素の内容

私はまだ毎日CSSのことを学んでおり、可能なことに驚いています。たとえば、私はちょうど最初の子供の擬似要素について学んだ - あなたはそれを行うことができます考えていた！だから私は驚いているので、解決策を見つけることができなくても、私が後にしていることを達成する方法があれば、ここで尋ねると思った。use：non-firstに変更する内容の擬似要素<thead><th>要素の内容

最初のページ以外のページに表示されているテーブルの要素の内容を変更したいとします。言い換えれば、テーブルが新しいページに壊れて、再びレンダリングされるとき、ヘッダーセルにコンテンツ（ "Cont ..."）を追加したいと思います。

ブラウザで印刷プレビューを実行すると2つのページが2行ずつ作成されるという非常に簡単な例がわかりました。 SECONDページでは、CSSを使用して要素の内容を変更したいと考えています。

誰もが考えている？私はCSSでこれを行う必要があります、私はメインのhtmlを変更することはできません、私はスタイルを変更することができます。

<html> 
<head> 
</head> 
<body> 
    <table border="1"> 
     <thead> 
      <tr> 
       <th> 
        Column 1 
       </th> 
       <th> 
        Column 2 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Row 1, Column 1</td> 
       <td>Row 1, Column 2</td> 
      </tr> 
      <tr style="page-break-after:always;"> 
       <td>Row 2, Column 1</td> 
       <td>Row 2, Column 2</td> 
      </tr> 
      <tr> 
       <td>Row 3, Column 1</td> 
       <td>Row 3, Column 2</td> 
      </tr> 
      <tr> 
       <td>Row 4, Column 1</td> 
       <td>Row 4, Column 2</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

出典

2011-06-23 Steve K

：

その1日にもかかわらず、あなたは代わりにそれを行うことができるようになります最初の-child'は擬似クラスで、' content'は財産ではなく、セレクタです。 – BoltClock

@BoltClock - 正解、誤字、タイトルの読み込みに使用する必要があります：内容と疑似要素... –

：nth-child疑似要素を使用することができます。）n番目の子（または：

http://css-tricks.com/5452-how-nth-child-works/

あなたが特定の行のみをターゲットにすることができ、n番目-の型（）。私は確信はないよ：n番目の子はしかし範囲を扱うことができるので、あなたは、あなたはかなりうるさくようなCSSの鎖に持つことがあります。

:nth-child(3), :nth-child(4), :nth-child(eleventy!!1!) {properties}

より： http://www.quirksmode.org/css/nthchild.html

さて、もちろん - あなたの場合SassまたはCompassを使用していました。この連鎖は簡単です。両方の項目を確認してください。

出典

2011-06-23 23:46:19 adc

@adc - 私は期待していましたが、うまくいきませんでした。テスト中に私はちょうど試した thead：最初の子tr { 色：赤; } それぞれのページのthead> trを個別に扱うかどうかを確認することはできますか？これは私がSOLかもしれないように見えます。情報をありがとう、nth-child（）について知りませんでした！ –

彼らはすべて擬似クラスです... – BoltClock

確かに@ steve-kです。申し訳ありませんが、これは後で動作しませんでした。あなたはHTMLにアクセスできないと聞こえますか？あなたはjsを使用できますか？もしそうなら、あなたはJSを通して物事にクラスを注入することができます。 – adc

contentは、ページのコンテキスト内で適用されるプロパティとしてlistedではないため、私はあなたがこれを達成できるとは思わないと思います。しかし、進行中の作業であることを忘れないでください。 `

@media print { 
@page :nth(n+2) { 
    @top-center { 
    content: "something"; 
    } 
} 
}

出典

2011-06-24 02:14:16 Knu

use：non-firstに変更する内容の擬似要素<thead><th>要素の内容

答えて

関連する問題