根据父级div更改嵌套子级div

Question

我需要找到一个可行的解决方案来更改嵌套重复div内某些文本的颜色，以便可以根据父div单独设置子div

编辑：我在原始示例中做了一个错字...这是我正在使用的实际代码和css，我只是无法正确处理....

<div class="productOption">
    <form action="#" method="post">
        <div class="productOptionDetails">
            <input type="hidden" name="id" value="1">
            <input type="hidden" name="add" value="Add">
            <input type="hidden" name="productTitle" value="2 Hours">
            <input type="hidden" name="productPrice" value="220">
            <input type="hidden" name="productSize" value="">
            <input type="hidden" name="productWeight" value="">
            <div class="productOptionName">2 Hours</div>
            <div class="productOptionSize">1</div>
            <div class="productOptionCode">2hr</div>
            <div class="productOptionPrice">$220.00</div>
        </div>
        <div class="productOptionOrder">
            <div class="productOptionQty">
                <input id="qtyfield" type="text" name="qty" value="1">
            </div>
            <div class="addtocart">
                <button class="productD_order" type="submit" value="Order Online">Add To &nbsp;<img src="himages/cart-icon.png" alt=""></button>
            </div>
        </div>
        <div class="productOptionDetails">
            <input type="hidden" name="id" value="1">
            <input type="hidden" name="add" value="Add">
            <input type="hidden" name="productTitle" value="2 Hours">
            <input type="hidden" name="productPrice" value="220">
            <input type="hidden" name="productSize" value="">
            <input type="hidden" name="productWeight" value="">
            <div class="productOptionName">2 Hours</div>
            <div class="productOptionSize">1</div>
            <div class="productOptionCode">2hr</div>
            <div class="productOptionPrice">$220.00</div>
        </div>
        <div class="productOptionOrder">
            <div class="productOptionQty">
                <input id="qtyfield" type="text" name="qty" value="1">
            </div>
            <div class="addtocart">
                <button class="productD_order" type="submit" value="Order Online">Add To &nbsp;<img src="himages/cart-icon.png" alt=""></button>
            </div>
        </div>
        <div class="productOptionDetails">
            <input type="hidden" name="id" value="1">
            <input type="hidden" name="add" value="Add">
            <input type="hidden" name="productTitle" value="2 Hours">
            <input type="hidden" name="productPrice" value="220">
            <input type="hidden" name="productSize" value="">
            <input type="hidden" name="productWeight" value="">
            <div class="productOptionName">2 Hours</div>
            <div class="productOptionSize">1</div>
            <div class="productOptionCode">2hr</div>
            <div class="productOptionPrice">$220.00</div>
        </div>
        <div class="productOptionOrder">
            <div class="productOptionQty">
                <input id="qtyfield" type="text" name="qty" value="1">
            </div>
            <div class="addtocart">
                <button class="productD_order" type="submit" value="Order Online">Add To &nbsp;<img src="himages/cart-icon.png" alt=""></button>
            </div>
        </div>      
    </form>
</div>

.productOption:nth-child(1) > form > .productOptionDetails > .productOptionName { color:#049b5c;}
.productOption:nth-child(2) > form > .productOptionDetails > .productOptionName { color:#0482fa;}
.productOption:nth-child(3) > form > .productOptionDetails > .productOptionName { color:#5802b4;}
.productOption:nth-child(4) > form > .productOptionDetails > .productOptionName { color:#df041b;}
.productOption:nth-child(5) > form > .productOptionDetails > .productOptionName { color:#02417D;}
.productOption:nth-child(6) > form > .productOptionDetails > .productOptionName { color:#fff600;}

所有这些操作是使每种.productOptionName文本颜色变为第一个绿色

有人可以指出我正确的方向吗？

Answer 1

显式直子的示例

.parent:nth-child(1) > .levelone > .leveltwo {
  color: red;
}
.parent:nth-child(2) > .levelone > .leveltwo {
  color: blue;
}

更通用的方法示例，但减少了过大的CSS

.parent:nth-child(1) .leveltwo {
  color: red;
}
.parent:nth-child(2) .leveltwo {
  color: blue;
}

Answer 2

当您的示例中只有三个这样的div时，我不太确定为什么要为.productOptionName定义六种不同的样式。我假设您要为这三个div上色全部为不同的颜色，而无需向其添加id或额外的类。

现在，您尝试使用.productOption选择器选择第n个孩子，该孩子也具有.productOption:nth-child(n)类。您只有一个班级为.productOption的div，在这种情况下，该班级是（正文的）第一个子级，因此将只执行CSS的第一行：

.productOption:nth-child(1) > form > .productOptionDetails > .productOptionName { color:#049b5c;} 

此行CSS将选择.productOption div，然后选择其中的form。然后，所有类别为.productOptionDetails的div，然后是所有类别为.productOptionName的div，为它们着色#049b5c。

如果您要在示例中为类.productOptionName的所有三个div着色，请尝试以下示例。这将选择类为.productOption的div，然后选择其中的form。然后使用nth-child()选择器选择也具有类.productOptionDetails的子项1、3和5，并在其中选择.productOptionName。

.productOption > form > .productOptionDetails:nth-child(1) > .productOptionName { color:red;}
.productOption > form > .productOptionDetails:nth-child(3) > .productOptionName { color:blue;}
.productOption > form > .productOptionDetails:nth-child(5) > .productOptionName { color:green;}

<div class="productOption">
    <form action="#" method="post">
        <div class="productOptionDetails">
            <input type="hidden" name="id" value="1">
            <input type="hidden" name="add" value="Add">
            <input type="hidden" name="productTitle" value="2 Hours">
            <input type="hidden" name="productPrice" value="220">
            <input type="hidden" name="productSize" value="">
            <input type="hidden" name="productWeight" value="">
            <div class="productOptionName">2 Hours</div>
            <div class="productOptionSize">1</div>
            <div class="productOptionCode">2hr</div>
            <div class="productOptionPrice">$220.00</div>
        </div>
        <div class="productOptionOrder">
            <div class="productOptionQty">
                <input id="qtyfield" type="text" name="qty" value="1">
            </div>
            <div class="addtocart">
                <button class="productD_order" type="submit" value="Order Online">Add To &nbsp;<img src="himages/cart-icon.png" alt=""></button>
            </div>
        </div>
        <div class="productOptionDetails">
            <input type="hidden" name="id" value="1">
            <input type="hidden" name="add" value="Add">
            <input type="hidden" name="productTitle" value="2 Hours">
            <input type="hidden" name="productPrice" value="220">
            <input type="hidden" name="productSize" value="">
            <input type="hidden" name="productWeight" value="">
            <div class="productOptionName">2 Hours</div>
            <div class="productOptionSize">1</div>
            <div class="productOptionCode">2hr</div>
            <div class="productOptionPrice">$220.00</div>
        </div>
        <div class="productOptionOrder">
            <div class="productOptionQty">
                <input id="qtyfield" type="text" name="qty" value="1">
            </div>
            <div class="addtocart">
                <button class="productD_order" type="submit" value="Order Online">Add To &nbsp;<img src="himages/cart-icon.png" alt=""></button>
            </div>
        </div>
        <div class="productOptionDetails">
            <input type="hidden" name="id" value="1">
            <input type="hidden" name="add" value="Add">
            <input type="hidden" name="productTitle" value="2 Hours">
            <input type="hidden" name="productPrice" value="220">
            <input type="hidden" name="productSize" value="">
            <input type="hidden" name="productWeight" value="">
            <div class="productOptionName">2 Hours</div>
            <div class="productOptionSize">1</div>
            <div class="productOptionCode">2hr</div>
            <div class="productOptionPrice">$220.00</div>
        </div>
        <div class="productOptionOrder">
            <div class="productOptionQty">
                <input id="qtyfield" type="text" name="qty" value="1">
            </div>
            <div class="addtocart">
                <button class="productD_order" type="submit" value="Order Online">Add To &nbsp;<img src="himages/cart-icon.png" alt=""></button>
            </div>
        </div>      
    </form>
</div>