Question

我正在键入以将css应用于具有[data-row="row"]

的备用元素

类似：

[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

DEMO IS HERE

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

如何在具有特定数据值的备用元素上应用CSS？

2 个答案: