Селекторы CSS: можно выбрать ТОЛЬКО второй элемент? - PullRequest
Новая
       11

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

6 голосов
/ 05 июня 2011

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

<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 получает тот, который мне нужен, и тот, который я пометил «Определенно не этот DIV!». 

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

То же самое касается и этого: он получает тот, который я хочу, и тот, который я пометил «Определенно, не этот DIV!». 

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

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

Ответы [ 3 ]

9 голосов
/ 05 июня 2011

Это должно быть сделано. 

#column > div:first-child + div

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

Возможно, вы захотите просмотреть CSS-селекторы , так как это прямые потомки и родственные селекторы, которые дают вам возможность выбрать конкретный элемент DOM.

3 голосов
/ 05 июня 2011

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

#column > div:first-child + div
0 голосов
/ 05 июня 2011

Попробуйте это 

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