CSS 选择器 - 按上一个元素文本选择元素

Question

我想从几个页面中选择类别。

我有以下 html:

<div class="comp-top col-sm-6">
    <div class="row">
        <div class="col-6 comp-stat">Rank</div>
        <div class="col-6 comp-value">5</div>
        <div class="col-6 comp-stat">Type</div>
        <div class="col-6 comp-value">Product</div>
        <div class="col-6 comp-stat">Category</div>
        <div class="col-6 comp-value">Store</div>  
    </div>
</div>

但是，有时 html 看起来像这样:

<div class="comp-top col-sm-6">
    <div class="row">
        <div class="col-6 comp-stat">Rank</div>
        <div class="col-6 comp-value">5</div>
        <div class="col-6 comp-stat">Category</div>
        <div class="col-6 comp-value">Store</div>  
    </div>
</div>

或者像这样:

<div class="comp-top col-sm-6">
    <div class="row">
        <div class="col-6 comp-stat">Type</div>
        <div class="col-6 comp-value">Product</div>
        <div class="col-6 comp-stat">Category</div>
        <div class="col-6 comp-value">Store</div>  
    </div>
</div>

如您所见，类别的位置发生了变化。我想创建一个 css 选择器，它在 Category 文本之后获取文本 Store。

有什么建议如何做到这一点？

Answer 1

像这样为 .col-6 使用 :last-child 选择器:

.col-6:last-child {
  color: red
}

或者，

这不是 CSS，但您可以使用 JQuery :contains 选择器来解决您的问题。

$( ".col-6:contains('Store')" ).css( "text-decoration", "underline" );