我该如何选择CSS？

Question

Lets say I have the following..

<div>
    <div>
        <div>
            <div></div>  <<<Select this one..
            <div></div>  <<<Not this one..
            <div></div>  <<<Select this one..
            <div></div>  <<<Select this one..
        </div>
    </div>
</div>

How would I select those 3 divs without adding any classes or ids? Is this even possible?

Answer 1

You can use the :not() and :nth-child() pseudo-classes.

 div > div > div > div:not(:nth-child(2)){ color: red; } 

 <div> <div> <div> <div>Test</div> <div>Test</div> <div>Test</div> <div>Test</div> </div> </div> </div> 

Demo in jsFiddle

Note : For ie8 support , you could use the same selector in jQuery and style your element that way.

 $("div > div > div > div:not(:nth-child(2))") .css("background-color", "yellow") 

 <div> <div> <div> <div>Test</div> <div>Test</div> <div>Test</div> <div>Test</div> </div> </div> </div> <!-- External Resources --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 2

If you need to support IE7 you can use:

div > div > div > div + div + div, 
div > div > div > div:first-child {
    color: orange;
}

http://jsfiddle.net/4TYcb/1/

Answer 3

div div div :not(:nth-child(2))

只会选择那些div

Answer 4

If you need a solution that also works for older IEs you have to think a bit different than supposed by most of the answers so far.

Style all DIVs that are the third child:

div > div > div > div {/* styles for all 4 DIVs */}

And then change the second one back:

div > div > div > div:first-child + div {/* styles only for the second DIV */}

See jsFiddle

But as already written in my comment on your question, your HTML markup is highly "questionable".

PS: The difference to @Adrift's answer is, that the second rule selects the second DIV. IMHO this is more useful in practice rather than to exclude an element. It is also "more robust" just in case another element than a DIV will be inserted.

As you just wrote that this is not what you are looking for, here is another option to achieve " what you are looking for "!

In your case you could also use the :nth-of-type() selector, instead of the :nth-child() one - see Fiddle

As you see there is a whole bunch of options. You should take the time and try to understand all these different approaches to be able to decide which one will fit your needs best!