使用：內容僞元素非首先更改<thead><th>元素內容

我仍然每天都會對CSS有更多的瞭解，並繼續對可能發生的事情感到驚訝。例如，我剛剛瞭解到第一個孩子的僞元素 - 沒有想法，你可以做到這一點！所以，因爲我繼續感到驚訝，我想我會問在這裏是否有辦法完成我之後的事情，儘管我無法找到解決方案。使用：內容僞元素非首先更改<thead><th>元素內容

我想要更改顯示在非首頁上的表格中的元素中的內容。換句話說，當一個表打破了一個新的頁面，並再次呈現我想附加內容（「Cont ...」）的標題單元格。

我ban出了一個非常簡單的例子，當您在瀏覽器中打印預覽時將產生兩個頁面，每個頁面有兩行。在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

'：第一child'是一個僞類和'content'是一個屬性，而不是一個選擇。 – BoltClock

@BoltClock - 對，錯字，標題應該有讀取使用：內容和僞元素... –

您可能可以使用：nth-child僞元素。

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

您可以指定只有特定的行：第n個孩子（），或：第n-的類型（）。我不能確定：第n個孩子雖然可以處理的範圍，所以你可能需要您鏈CSS而煩人，如：

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

，當然 - 如果你正在使用Sass或Compass - 這種鏈接會很簡單。檢查兩個項目。

來源

2011-06-23 23:46:19 adc

@adc - 我很有希望，但它沒有奏效。雖然測試我剛試過 thead：first-child tr { color：red; } 看看是否會甚至單獨處理每個頁面的> tr，但它不會。看起來我可能是SOL的這一個。感謝您的信息，不知道關於nth-child（）！ –

他們都是僞類...... – BoltClock

當然@史蒂夫k。對不起，這不適用於你。這聽起來像你沒有訪問HTML？你可以用js嗎？如果是這樣 - 你可以通過JS向類注入類。 – adc

由於content不是listed作爲適用於頁面上下文中的屬性，我認爲您永遠無法實現它。但請記住，這是一項正在進行的工作：他們可能會將其添加到您的輸入中。

儘管這有一天，你將能夠做到這一點，而不是：

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

來源

2011-06-24 02:14:16 Knu

使用：內容僞元素非首先更改<thead><th>元素內容

回答

相關問題