https://github.com/phonegap/phonegap-plugin-push
#strucmat tr:not(:first-child) td:not(:nth-child(1)), td:not(:nth-child(3)), td:not(:nth-child(8)) {
background-color:red;
text-align: center;
}
我想要发生的事情是:选择除第一行,标题以外的所有行,并选择所有td
,但第一,第三和第八td
除外。
答案 0 :(得分:3)
您需要将多个:not
选择器链接到一个AND规则中。所以请尝试使用此选择器:
#strucmat tr:not(:first-child) td:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(8)) {
background-color: red;
}
答案 1 :(得分:0)
If you are able to modify your HTML output, use semantic th
tags to identify your header cells, and apply identifier classes to the first, third and eighth td
elements.
This provides better structure for your code to promote maintainability and improves the performance of your CSS for faster rendering. You also gain cross-browser and legacy browser support.
You'll thank yourself later when you go to edit your CSS and you're not wasting time figuring out what you were trying to achieve with a convoluted, non-performant selector. ;)
#strucmat th,
#strucmat td.roof,
#strucmat td.flooring,
#strucmat td.walls {
background-color: red;
text-align: center;
}
<table width="100%" border="2" id="strucmat">
<thead>
<tr align="center">
<th colspan="2">ROOF</th>
<th>FLOORING</th>
<th>1st
<br>Flr.</th>
<th>2nd
<br>Flr.</th>
<th>3rd
<br>Flr.</th>
<th>4th
<br>Flr.</th>
<th>Walls & Partitions</th>
<th>1st
<br>Flr.</th>
<th>2nd
<br>Flr.</th>
<th>3rd
<br>Flr.</th>
<th>4th
<br>Flr.</th>
</tr>
</thead>
<tbody>
<tr>
<td class="roof">Reinforced Concrete</td>
<td width="5%"> <span type="text" data-id="printroofReinforced Concrete" id="printroofreinforcedconcrete" class="center"></span>
<br>
</td>
<td class="flooring">Reinforced Concrete(for upper floors)</td>
<td> <span type="text" data-id="print1st FloorfloorReinforced Concrete" id="printfloorreinforcedconcrete1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorfloorReinforced Concrete" id="printfloorreinforcedconcrete2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorfloorReinforced Concrete" id="printfloorreinforcedconcrete3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorfloorReinforced Concrete" id="printfloorreinforcedconcrete4th" class="center"></span>
<br>
</td>
<td class="walls">Reinforced Concrete</td>
<td> <span type="text" data-id="print1st FloorwallReinforced Concrete" id="printwallreinforcedconcrete1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorwallReinforced Concrete" id="printwallreinforcedconcrete2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorwallReinforced Concrete" id="printwallreinforcedconcrete3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorwallReinforced Concrete" id="printwallreinforcedconcrete4th" class="center"></span>
<br>
</td>
</tr>
<tr>
<td class="roof">Tiles</td>
<td width="5%" style="text-align: center;"> <span type="text" data-id="printroofTiles" data-id="printroofTiles" id="printrooftiles" class="center"></span>
<br>
</td>
<td class="flooring">Plain Cement</td>
<td> <span type="text" data-id="print1st FloorfloorPlain Cement" id="printfloorplaincement1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorfloorPlain Cement" id="printfloorplaincement2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorfloorPlain Cement" id="printfloorplaincement3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorfloorPlain Cement" id="printfloorplaincement4th" class="center"></span>
<br>
</td>
<td class="walls">Plain Cement</td>
<td> <span type="text" data-id="print1st FloorwallPlain Cement" id="printwallplaincement1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorwallPlain Cement" id="printwallplaincement2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorwallPlain Cement" id="printwallplaincement3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorwallPlain Cement" id="printwallplaincement4th" class="center"></span>
<br>
</td>
</tr>
<tr>
<td class="roof">G.I. Sheet</td>
<td width="5%"> <span type="text" data-id="printroofG.I. Sheet" id="printroofGISheet" class="center"></span>
<br>
</td>
<td class="flooring">Marble</td>
<td> <span type="text" data-id="print1st FloorfloorMarble" id="printfloormarble1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorfloorMarble" id="printfloormarble2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorfloorMarble" id="printfloormarble3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorfloorMarble" id="printfloormarble4th" class="center"></span>
<br>
</td>
<td class="walls">Wood</td>
<td> <span type="text" data-id="print1st FloorwallWood" id="printwallwood1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorwallWood" id="printwallwood2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorwallWood" id="printwallwood3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorwallWood" id="printwallwood4th" class="center"></span>
<br>
</td>
</tr>
<tr>
<td class="roof">Aluminum</td>
<td width="5%"> <span type="text" data-id="printroofAluminum" id="printfloorwood1st" class="center"></span>
<br>
</td>
<td class="flooring">Wood</td>
<td> <span type="text" data-id="print1st FloorfloorWood" id="printfloorwood1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorfloorWood" id="printfloorwood2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorfloorWood" id="printfloorwood3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorfloorWood" id="printfloorwood4th" class="center"></span>
<br>
</td>
<td class="walls">CHB</td>
<td> <span type="text" data-id="print1st FloorwallCHB" id="printwallchb1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorwallCHB" id="printwallchb2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorwallCHB" id="printwallchb3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorwallCHB" id="printwallchb4th" class="center"></span>
<br>
</td>
</tr>
<tr>
<td class="roof">Asbestos</td>
<td width="5%"> <span type="text" data-id="printroofAsbestos" id="printroofasbestos" class="center"></span>
<br>
</td>
<td class="flooring">Tiles</td>
<td> <span type="text" data-id="print1st FloorfloorTiles" id="printfloortiles1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorfloorTiles" id="printfloortiles2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorfloorTiles" id="printfloortiles3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorfloorTiles" id="printfloortiles4th" class="center"></span>
<br>
</td>
<td class="walls">G.I. Sheet</td>
<td> <span type="text" data-id="print1st FloorwallG.I. Sheet" id="printwallgisheet1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorwallG.I. Sheet" id="printwallgisheet2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorwallG.I. Sheet" id="printwallgisheet3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorwallG.I. Sheet" id="printwallgisheet4th" class="center"></span>
<br>
</td>
</tr>
<tr>
<td class="roof">Long Span</td>
<td width="5%"> <span type="text" data-id="printroofLong Span" id="printrooflongspan" class="center"></span>
<br>
</td>
<td class="flooring">Others(Specify)</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td class="walls">Build-a-wall</td>
<td> <span type="text" data-id="print1st FloorwallBuild-a-wall" id="printwallbuildawall1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorwallBuild-a-wall" id="printwallbuildawall2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorwallBuild-a-wall" id="printwallbuildawall3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorwallBuild-a-wall" id="printwallbuildawall4th" class="center"></span>
<br>
</td>
</tr>
<tr>
<td class="roof">Concrete Desk</td>
<td width="5%"> <span type="text" data-id="printroofConcrete Desk" id="printroofconcretedesk" class="center"></span>
<br>
</td>
<td class="flooring">
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td class="walls">Sawali</td>
<td> <span type="text" data-id="print1st FloorwallSawali" id="printwallsawali1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorwallSawali" id="printwallsawali2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorwallSawali" id="printwallsawali3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorwallSawali" id="printwallsawali4th" class="center"></span>
<br>
</td>
</tr>
<tr>
<td class="roof">Nipa/Anahaw/Cogon</td>
<td width="5%"> <span type="text" data-id="printroofNipa/Anahaw/Cogon" id="printroofnipaanahawcogon" class="center"></span>
<br>
</td>
<td class="flooring">
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td class="walls">Bamboo</td>
<td> <span type="text" data-id="print1st FloorwallBamboo" id="printwallbamboo1st" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print2nd FloorwallBamboo" id="printwallbamboo2nd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print3rd FloorwallBamboo" id="printwallbamboo3rd" class="center"></span>
<br>
</td>
<td> <span type="text" data-id="print4th FloorwallBamboo" id="printwallbamboo4th" class="center"></span>
<br>
</td>
</tr>
<tr>
<td class="roof">Others(Specify)</td>
<td width="5%">
<br>
</td>
<td class="flooring">
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td class="walls">Others(Specify)</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
</tr>
<tr>
<td class="roof">
<br>
</td>
<td width="5%">
<br>
</td>
<td class="flooring">
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td class="walls">
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
<td>
<br>
</td>
</tr>
</tbody>
</table>