css：first-child：nth-​​child（2）不在fieldset表单内部工作

Question

css属性：

aside fieldset:first-child form span

工作正常并受到预期影响，但我无法在span中设置颜色：

aside fieldset:first-child form span:first-child // unaffected and not working


aside fieldset:first-child form span:nth-child(2) // unaffected and not working

jsFiddle：

http://jsfiddle.net/Wpd6L/

css：

aside {
    float: right;
    width: 344px;
}

aside fieldset {
    border: 0;
}

aside fieldset:first-child {
    border-color: #c00;
    border-style: dotted;
    border-width: 2px;
    text-align: center;
}

aside fieldset:first-child * {
    clear: both;
    margin: 10px auto 0;
}

aside fieldset:first-child video {
    width: 320px;
    height: 240px;
}

aside fieldset:first-child form h5 {
    font-size: 14px;
}

aside fieldset:first-child form span {
    cursor: pointer;
    color: #555;
    border-radius: 5px;
    height: 18px;
    display: block;
    line-height: 18px;
    text-align: left;
    font-size: 11px;
    padding: 5px 23px 5px 5px;
    width: 240px;
    z-index: 5;
    border: 1px solid #a6ca8a;
}

aside fieldset:first-child form span:first-child {
    border:1px solid #a6ca8a;
    background:#e9ffd9;
}

aside fieldset:first-child form span:nth-child(2) {
    border:1px solid #f5aca6;
    background:#ffecec;
}

aside fieldset:first-child small {
    display: block;
    font-size: 10px;
    margin-bottom: 10px;
}

aside fieldset:nth-child(2) {
    padding: 10px;
    width: 320px;
}

aside fieldset:nth-child(2) ul li {
    height: 250px;
    overflow: hidden;
    width: 300px;
}

aside fieldset:nth-child(3) {
    padding: 10px;
    width: 320px;
}

html：

<fieldset>
    <video width=320 height=240 controls preload=none poster="https://puaction.com/vid/mainvideo/pua-video.jpg">
        <source src="https://puaction.com/vid/mainvideo/mainvideo.mp4" type="video/mp4">
        <source src="https://puaction.com/vid/mainvideo/mainvideo.webm" type="video/webm">
        <source src="https://puaction.com/vid/mainvideo/mainvideo.ogv" type="video/ogg">
    </video>
    <img src="https://puaction.com/img/triggers/7-most-horrible-mistakes.png" width=297 height=158 title="7 most horrible mistakes" alt="7 most horrible mistakes">
    <form method=post action="/index.php">
        <input name=user class=user maxlength=40 placeholder="Full Name" autocomplete=off required >
        <input name=email class=email maxlength=40 placeholder="eMail Address" autocomplete=off required>
        <h5>Please solve the math captcha.<br>What is 4 + 1 =</h5>
        <input name=captcha class=captcha maxlength=2 placeholder="Math Captcha" autocomplete=off required>


        <span><strong>SUCCESS !</strong> Please check your email.</span>
        <span><strong>Opps !</strong> something went wrong please try again.</span>


        <button>Yea ! I'm In !</button> 
        <small>We NEVER share the information you provide us.</small>   
    </form>
</fieldset>
            </aside>

Answer 1

form的第一个孩子是“用户”输入字段，第二个孩子是“电子邮件”输入字段。因此，它们与span:first-child和span:nth-child(2)选择器不匹配。

请改用:first-of-type和:nth-of-type(2)，这样您就可以获得第一个和第二个span个孩子，而不是form元素的明确第一个和第二个孩子：

aside fieldset:first-child form span:first-of-type
aside fieldset:first-child form span:nth-of-type(2)

Updated fiddle