Question

我有嵌套的div /类。它像这样嵌套/循环：行容器，行，行内容，列，列内

目标： 我只想在“框”类的第二级上选择“ col”类。并忽略第一和第三和第三。

其清理的html在下面。但是首先是可以工作的CSS代码，然后是我期望的。

工作中的CSS：

.box > .row-content > .col > .col-inner > .row-container > .row > .row-content > .col { 
    /* css stuff */ 
}

预期的CSS 1：（不起作用）

.box > .row-content:nth-of-type(2) > .col  { 
    /* css stuff */ 
}

预期的CSS 2：（不起作用）

.box > .row-content > .row-content > .col  { 
    /* css stuff */ 
}

html代码

<div class="box row"> 
    <div class="row-content">
        <div class="col"> <!-- IGNORE THIS COL -->
            <div class="col-inner">
                <div class="row-container">
                    <div class="row"> 
                        <div class="row-content">
                            <div class="col"> <!-- TARGET COL -->
                                <div class="col-inner">
                                    <!-- do stuff -->
                                </div>
                            </div>
                            <div class="col"> <!-- TARGET COL -->
                                <div class="row">
                                    <div class="row-content">
                                        <div class="col"> <!-- IGNORE THIS COL -->
                                            <div class="col-inner">
                                                <!-- do stuff -->
                                            </div>
                                        </div>
                                        <div class="col"> <!-- IGNORE THIS COL -->
                                            <div class="col-inner">
                                                <!-- do stuff -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

欢迎任何帮助和指点！

Answer 1

你在这里..

.box .row-container > .row > .row-content > .col {
    /* css stuff */
}

Answer 2

请尝试这个

.box .col .col:nth-child(1){
      /*Some CSS*/
 }
 .box .col .col:nth-child(2){
     /*Some CSS*/
 }

Answer 3

这应该可以解决您的问题

.row > .row-content > .col

CSS嵌套选择器，仅选择级别2，忽略1st和3及更高版本

3 个答案: