基于父子关系的样式 div / 具有相同的类（引导类）答案

【问题标题】：Style divs /w same class based on parent-child relation (bootstrap classes)基于父子关系的样式 div / 具有相同的类（引导类）
【发布时间】：2017-07-03 21:16:30
【问题描述】：

我有以下 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;
    }
}

后果：

我可以选择 .row 的孩子
测试颜色：红色；我为 .col-md-6 的内容设置样式（它们设置为继承颜色）
使用背景颜色进行测试：红色；我为 .row 设置样式
并且再次定位.row 的孙子样式

注意：

umbraco 后端中的 .col-md-6 类不能更改，因为这些在 web 应用程序的其他地方使用。我不想在后端手动添加类，也不想根据位置添加带有 JS 的类

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

【问题讨论】：

也许可以试试div:nth-of-type(1)
我改成了 position:page;它起作用了选择器，对于某些样式，选择了多个

标签： css twitter-bootstrap css-selectors umbraco

【解决方案1】：

定位的答案

position:page;

适用于 .row 内部的定位

【讨论】：

【解决方案2】：

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>

【讨论】：