nth-child（）不在打印介质中显示

Question

忽略由div制成的表格（相信我，我已经讨论过这些功能），但我无法使用交替行背景颜色查看我的印刷媒体。这里是我的本钱：

<div class="table"> 
    <div class="head"> 
    <div class="headcell">Column 1 is this long</div> 
    <div class="headcell">Column 2 but this neeeds to be this long</div> 
    <div class="headcell">Column 3</div> 
    </div> 
    <div class="row"> 
    <div class="cell">Column 1 is this long</div> 
    <div class="cell">Column 2 but this neeeds to be this lonn</div> 
    <div class="cell">Column 3</div> 
    </div> 
    <div class="row"> 
    <div class="cell">Column 1</div> 
    <div class="cell">Column 2</div> 
    <div class="cell">Column 3</div> 
    </div> 
    <div class="row"> 
    <div class="cell">Column 1</div> 
    <div class="cell">Column 2</div> 
    <div class="cell">Column 3</div> 
    </div> 
    <div class="row"> 
    <div class="cell">Column 1</div> 
    <div class="cell">Column 2</div> 
    <div class="cell">Column 3</div> 
    </div> 
    <div class="row"> 
    <div class="cell">Column 1</div> 
    <div class="cell">Column 2</div> 
    <div class="cell">Column 3</div> 
    </div> 
</div> 

我的CSS：

@media print 
{ 
h1 { 
    margin-top: 17.67pt; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    font-style: normal; 
    font-size: 16pt; 
    margin-bottom: 1.67pt; 
    padding-left: none; 
    background-image: none; 
    text-decoration: underline !important; 
} 

/*Table made of Divs PDF Styles*/ 
.table { 
    font-family: sans-serif; 
    font-size: 12px; 
    display: table; 
    width: 80%; 
    margin: 20px; 
} 

.head { 
    display: table-row; 
    border: #ccc 1px solid; 
    padding:4px 10px; 
    text-align:center; 
    font-weight: bold; 
    background-color: #ccc; 
} 

.row { 
    display: table-row; 
    border: #ccc 1px solid; 
} 

.headcell { 
    display: table-cell; 
    border: #ccc 1px solid; 
    padding: 10px; 
    font-align: center; 
} 

.cell { 
    display: table-cell; 
    padding: 10px; 
    border: #ccc 1px solid; 
} 

div.row:nth-child(odd) { 
    background-color: #ccc; 
} 

div.row:nth-child(even) { 
    background-color: #fff; 
} 
} 

我感谢大家的帮助！

Answer 1

您不能强制打印最终用户打印背景颜色。这是可以关闭的浏览器中的打印机设置。这就是为什么它不起作用。 你的孩子选择器工作得很好。请参阅打印预览下方的屏幕截图。

http://jsfiddle.net/Gjf8K/3/

@media print { 
    div.row:nth-child(odd) { 
    background-color: #ccc; 
    color: red; 
    } 
    div.row:nth-child(even) { 
    background-color: #fff; 
    color: green; 
    } 
} 

Answer 2

，你可以有这样的CSS代码自定义行一个以某种方式和以另一种方式在一个之前的背景（奇数和偶数行）

//*Odd cells 
    div.row:nth-child(even) div.cell { 
     background-color: #000000; 
     color: white; 
     } 

    //* Even cells 
div.row:nth-child(odd) div.cell { 
     background-color: #000000; 
     color: white; 
     }