如何在具有特定數據值的備用元素上應用CSS？

Question

我正在鍵入以在具有[data-row="row"]備用元素上應用css

就像是：

 [data-row="row"]:nth-of-type(odd) { background-color: #B7CEEC; } 

 <div class="pricingdiv" style="width:100%;min-height: 100px;background-color:white;"> <ol class="pricingList"> <li class="LotLi"> <div class="addedlot" data-row="row" title="Left Click to see Details. Right Click to Add Lineitem." data-lot="txtlottitle~Lot Title^lotstextarea~&quot;asdad&quot;^file_uploadlot~LotFile472cb2d^lottype~value^txtbiddecrement~123^txtfrontbuffer~^txtbackbuffer~">Lot Title-"asdad" <span><input class="chkdeletelot" style="float:left;" value="delete" type="checkbox"> </span> <span class="deletelotli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span> </div> <ol class="lotchildlist"> <li class="LineitemLi" title="Left Click to see more."> <div class="addedlineitem" data-row="row" data-ceilingprice="123" data-historicprice="123" data-reserveprice="3" data-quantity="2332" data-extendedprice="2" data-saving="23">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">123</span> <span clas="quantity" style="padding-left:130px">2332</span> <span class="extendedprice" style="padding-left:130px">'2'</span> <span class="saving" style="padding-left:130px">'23'</span> <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span> <div class="lineitemdescription" data-row="row">'ads'</div> </div> </li> <li class="LineitemLi" title="Left Click to see more."> <div class="addedlineitem" data-row="row" data-ceilingprice="342" data-historicprice="2323" data-reserveprice="432" data-quantity="33" data-extendedprice="434" data-saving="">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">342</span> <span class="quantity" style="padding-left:130px">33</span> <span class="extendedprice" style="padding-left:130px">'434'</span> <span class="saving" style="padding-left:130px">''</span> <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span> <div class="lineitemdescription" data-row="row">'asdad'</div> </div> </li> </ol> </li> <li class="LotLi"> <div class="addedlot" data-row="row" title="Left Click to see Details. Right Click to Add Lineitem." data-lot="txtlottitle~Lot Title2^lotstextarea~&quot;asdad&quot;^file_uploadlot~LotFile6b238d6^lottype~value^txtbiddecrement~23^txtfrontbuffer~^txtbackbuffer~">Lot Title2-"asdad" <span><input class="chkdeletelot" style="float:left;" value="delete" type="checkbox"> </span> <span class="deletelotli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span> </div> <ol class="lotchildlist"> <li class="LineitemLi" title="Left Click to see more."> <div class="addedlineitem" data-row="row" data-ceilingprice="123" data-historicprice="123" data-reserveprice="23" data-quantity="232" data-extendedprice="23" data-saving="23">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">123</span> <span class="quantity" style="padding-left:130px">232</span> <span class="extendedprice" style="padding-left:130px">'23'</span> <span class="saving" style="padding-left:130px">'23'</span> <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span> <div class="lineitemdescription" data-row="row">'asd'</div> </div> </li> </ol> </li> </ol> </div> 

我更喜歡純CSS解決方案。 謝謝。

Answer 1

演示就在這里

.pricingList > li:nth-of-type(odd)>div[data-row="row"] {
  background-color: red;
}
.pricingList > li:nth-of-type(even)>div[data-row="row"]{
    background-color: blue;
}
.pricingList > li:nth-of-type(odd) ol li:nth-of-type(odd) [data-row="row"]{
    background-color: blue;
}
.pricingList > li:nth-of-type(odd) ol li:nth-of-type(even) [data-row="row"]{
    background-color: red;
}
.pricingList > li:nth-of-type(even) ol li:nth-of-type(odd) [data-row="row"]{
    background-color: red;
}
.pricingList > li:nth-of-type(even) ol li:nth-of-type(even) [data-row="row"]{
    background-color: blue;
}

Answer 2

交替行是li，其中您具有data-row屬性。 所以：

li:nth-of-type(odd) [data-row="row"] {
    background-color: #B7CEEC;
}