Селекторы CSS: можно выбрать только второй элемент?

это вообще возможно?

<div class="column">
    <div> 
        <div> 
        </div>    
        <div> <!-- Definitely not this DIV! -->
        </div>    
    </div>
    <div>     <!-- THIS DIV ONLY! -->
    </div>    
</div>

следующий селектор CSS получает тот, который я отметил "определенно не этот DIV!".

.column div:last-child {
    background-color:red;
}

в CSS селектор получает один я хочу, и я отмеченный ", не этот див!".

.column div + div {
    background-color:red;
}

же касается этого: он получает один я хочу, и я отметил "точно не этот див!".

.column div:first-child + div {
    background-color:red;
}

вопрос: это даже возможно сделать с CSS, который будет быть распознанным IE7? (Я предполагаю, что мое решение будет работать с FF, Safari, Chrome и X:nth-child(n) работает только с IE9+) спасибо.

6
css css-selectors css3 html internet-explorer-7

3 ответов

это должно помочь.

#column > div:first-child + div

вы использовали селектор классов для выбора элемента с идентификатором.

вы можете посмотреть через селекторы CSS, поскольку это прямые селекторы потомков и братьев, которые дают вам тонкость выбора конкретного элемента DOM.

8

вам нужно бросить в ребенка combinator > сразу после #column, иначе сокровенные divs также будет рассматриваться:

#column > div:first-child + div
2

попробуй такое

<style type="text/css">
    div {
        width: 20px;
        height: 20px;
    }
    #column > div + div {
        background-color:red;
    }

</style>
<div id="column">
    <div> 
        <div> 
        </div>    
        <div> <!-- Definitely not this DIV! -->
        </div>    
    </div>
    <div>     <!-- THIS DIV ONLY! -->
    </div>    
</div>
0