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;
    }
}

后果：

我可以选择.row的孩子用颜色测试：红色;我设置.col-md-6的内容（它们设置为继承颜色）用背景色测试：红色;我设计了.row的风格并且定位再次塑造了.row的孙子们。

注意：

umbraco后端中的类.col-md-6无法更改，因为这些正在使用Web应用程序中的其他位置。我不打算在后端手动添加类，也不是根据位置

添加JS类

我怎样才能得到 :nth-child(1) / :first-child / :first-of-type
定位正确的div，只有div本身，用于定位？

Answer 1

定位的答案

position:page;

将适用于.row

内的定位

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

样式divs / w基于父子关系（引导类）相同的类

2 个答案: