CSS first-child 绝对不工作

Question

I have these html elements:

 .form-group:first-child { display: none; } #form-group:first-child { display: none; } #my-form #form-group:first-child { display: none; } #my-form .form-group:first-child { display: none; }

 <form id="my-form"> <div class="form-group" id="form-group">first</div> <div class="form-group" id="form-group">second</div> <div class="form-group" id="form-group"></div> <div class="form-group" id="form-group"></div> <div class="form-group" id="form-group"></div> <div class="form-group" id="form-group"></div> <div class="form-group" id="form-group"></div> <div class="form-group" id="form-group"></div> <div class="form-group" id="form-group"></div> <div class="form-group" id="form-group"></div> </form>

And none of these work, what am I doing wrong?

Answer 1

Firstly, ID's should be unique but

#my-form .form-group:first-child {

display: none;
}

..will work regardless

 #my-form .form-group:first-child { display: none; }

 <form id="my-form"> <div class="form-group" id="form-group">1</div> <div class="form-group" id="form-group">2</div> <div class="form-group" id="form-group">3</div> <div class="form-group" id="form-group">4</div> <div class="form-group" id="form-group">5</div> <div class="form-group" id="form-group">6</div> <div class="form-group" id="form-group">7</div> <div class="form-group" id="form-group">8</div> <div class="form-group" id="form-group">9</div> <div class="form-group" id="form-group">10</div> </form>

Answer 2

All those variations should work. You probably have an error in your <style> or <link> tag, or a problem with the document loading and referencing an external stylesheet.

Examples of correct syntax:

Referencing an external stylesheet:

<link rel="stylesheet" href="./styles.css">

Or an inline stylesheet.

<style>
.form-group:first-child {
    display: none;
}

#form-group:first-child {
    display: none;
}

#my-form #form-group:first-child {
    display: none;
}

#my-form .form-group:first-child {
    display: none;
}
</style>