How do I hide only the first element of a type?

问题:

I have the following markup:

<div class="ctr-1">
    <h3>Title</h3>
    <div class="ctr-2">
        <h3>Title</h3>
    </div>
</div>

And the following CSS

.ctr-1 h3:first-child{ display:none; }

Both <h3> tags are hidden, I only want the first one hidden. How?

回答1:

Like this:

.ctr-1 > h3:first-child {
    display:none; 
}

jsFiddle here

回答2:

This is what the first-of-type and nth-of-type selectors are for.

For example:

.ctr-1 h3:first-of-type { display:none; }
/* - Or - */
.ctr-1 h3:nth-of-type(0) { display:none; }

This would hide the first h3 descendant of .ctr-1, regardless of its location inside the parent element.

Granted, in your specific example, the h3 is indeed also the immediate (>) and first (:first-child) descendant of .ctr-1 . But if this is a coincidence, you might not be able rely on it. In that case, nth-of-type is the way to go.

回答3:

They are both technically the first-child.

In your example, you could do:

.ctr-1 > h3:first-child { display:none; }

回答4:

You have wrong, ctr doesn't exist, and you need to tell with > to select the first element level in your page selector try this:

.ctr-1 > h3:first-child{ display:none; }

回答5:

You can use:

.ctr-1 > h3 { display: none; }