代码之家 › 专栏 › 技术社区 › Carol.Kar

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

css-selectors

Carol.Kar · 技术社区 · 6 年前

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

非常感谢。

2 回复 | 直到 6 年前

elraphty 6 年前

用这个 .row .col-6:nth-child(even) ,它将同时选择此产品和测试类别。

Mukyuu 6 年前

我不知道你所说的选择是什么意思。但是,如果您想让选择器访问它们,那么这就是答案:

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选择器 .

推荐文章

Monica · 使用Selenium和Python在没有url的情况下单击下载文件

2 年前

Kevin Rodgers Jr. · Python BeautifulSoup:在in select语句中排除其他标记

2 年前

Arad · 即使使用相同的选择器,外部样式表也会覆盖内部样式表

6 年前

user1032531 · jQuery Validate require\u from\u group并按名称选择

6 年前

Christian Luneborg · 星级评定不起作用

6 年前

Gabriel Morais · CSS未应用媒体查询

6 年前

Kevin · CSS属性选择器中的“i”是什么意思?[副本]

6 年前

S syed · 如何在javascript中删除DIV标记内的CSS类?[副本]

6 年前

Karos papermoon · Div和定位问题

6 年前

user9549074 · 如何从CSS中的输入文本中设置最后一个字符的样式?

6 年前