基于 parent-child 关系 (bootstrap classes) 样式 div /with same class

Question

我有以下 HTML:

<div class="row">  
    <div class="col-md-6">...</div>  
    <div class="col-md-6">...</div>  
</div>

想要的效果：

.row {
    ~div:nth-child(1) /*also tried*/ ~div:first-child /*also tried*/ ~div:first-of-type {
        position:relative;
        left:5vw;
    }

    ~div:nth-child(2) /*also tried*/ ~div:last-child /*also tried*/ ~div:last-of-type {
        position:relative;
        right:5vw;
    }
}

结果：

我能够 select .row
的 children 使用 color:red 进行测试；我对 .col-md-6 的内容进行样式设置（它们设置为继承颜色）
背景测试-color:red；我设计了 .row
并且定位再次为 .row

的 grandchildren 设置样式

注意事项：

umbraco back-end 中的 class .col-md-6 不能更改，因为它们在网络应用程序的其他地方使用。我不想在后端手动添加 classes，也不想根据位置

使用 JS 添加 classes

如何获得
:nth-child(1) / :first-child / :first-of-type
定位正确的 div，并且仅定位 div 本身？

Answer 1

div { width: 100% }

.row div:nth-child(1) {
  background-color: red;
}
.row div:nth-child(2) {
  background-color: blue;
}

<div class="row">  
  <div class="col-md-6">...</div>  
  <div class="col-md-6">...</div>  
  <div class="col-md-6">...</div>  
  <div class="col-md-6">...</div>  
  <div class="col-md-6">...</div>  
  <div class="col-md-6">...</div>  
  <div class="col-md-6">...</div>  
  <div class="col-md-6">...</div>  
</div>

Answer 2

定位答案

position:page;

将用于 .row 内部的定位

基于 parent-child 关系 (bootstrap classes) 样式 div /with same class

Style divs /w same class based on parent-child relation (bootstrap classes)

css

umbraco

css-selectors

twitter-bootstrap