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; 
     }