問題描述
我有一張桌子
<table id="mytable">
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
我正在嘗試將表格條帶化設置為使用第 n 個子選擇器，但似乎無法破解它.
I'm trying to set the table striping to use nth-child selectors but just can't seem to crack it.
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #FFF;
}
我很確定我已經接近了......似乎無法破解它.
I'm pretty sure I'm close ... can't quite seem to crack it.
有人提供線索嗎?
推薦答案
這是你將要得到的最接近的.請注意，您不能讓 nth-child 只計算顯示的行數；nth-child 無論如何都會采用第 n 個子元素，而不是匹配給定選擇器的 nth 子元素.如果您希望丟失某些行而不影響斑馬條紋，則必須通過 DOM 或服務器端將它們從表中完全刪除.
Here's as close as you're going to get. Note that you can't make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.
<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
</style>
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
以下是我所做的修復:
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
無需為基于 id 的選擇器指定祖先選擇器；只有一個元素會匹配 #table，所以你只是通過添加 table 來添加額外的代碼.
There's no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you're just adding extra code by adding the table in.
#mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
現在， Now, 你有它. 這篇關于Zebra 使用 CSS3 對帶有隱藏行的表進行條帶化處理?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！[@display=block] 將匹配屬性 display 設置為 block 的元素，例如 .Display 不是有效的 HTML 屬性；你似乎想要做的是讓選擇器匹配元素的樣式，但你不能在 CSS 中做到這一點，因為瀏覽器需要應用 CSS 中的樣式才能弄清楚，這它在應用此選擇器時正在執行中.因此，您將無法選擇是否顯示表格行.由于 nth-child 無論如何只能取第 nth 個孩子，而不是帶有某些屬性的第 nth 個孩子，我們將不得不放棄這部分CSS.還有nth-of-type，它選擇相同元素類型的第n個子元素，但你只能這樣做.
[@display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn't a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can't do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it's in the process of doing when it's applying this selector. So, you won't be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we're going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that's all you can do. #mytable tr:nth-child(odd) {
background-color: #000;
}
相關文檔推薦