Question

我有以下HTML：

<div class="comp-top col-sm-6">
    <div class="row">
        <div class="col-6 comp-stat">Product</div>
        <div class="col-6 comp-value">This product</div>
        <div class="col-6 comp-stat">Category</div>
        <div class="col-6 comp-value">Test-Category</div>
    </div>
</div>

我想选择文本This product和Test-Category。有关如何定位Product和Category之后的下一个元素的任何建议。

谢谢！

Answer 1

我不确定您选择的意思。但是，如果您要让选择器访问它们，这将是答案：

div.comp-top.col-sm-6 > div> div.col-6.comp-value{
   background-color:grey;
}

或者：

div.comp-top.col-sm-6 > div > div:nth-child(2)，其中(x)是div上的x元素。

如果要选择它们两者，则可以使用(even)在div上选择偶数元素。

div.comp-top.col-sm-6 > div > div:nth-child(2){
   color:blue;
}

div.comp-top.col-sm-6 > div > div:nth-child(4){
   color:green;
}

/*div.comp-top.col-sm-6 > div > div:nth-child(even){
   background-color:grey;
}commented code above is to get even element, below to select by comp-value class*/

div.comp-top.col-sm-6 > div> div.col-6.comp-value{
   background-color:grey;
}

<div class="comp-top col-sm-6">
    <div class="row">
        <div class="col-6 comp-stat">Product</div>
        <div class="col-6 comp-value">This product</div>
        <div class="col-6 comp-stat">Category</div>
        <div class="col-6 comp-value">Test-Category</div>
    </div>
</div>

您可以检查 here ，以获取 CSS选择器 的更多参考。

Answer 2

使用此.row .col-6:nth-child(even)，它将选择“本产品”和“测试类别”。

CSS选择器-获取下一个元素

2 个答案: