html - 如何用CSS自定义一组控件

Question

我有这种用于填写 html 表单的结构

    <fieldset class="signup">
        <div>
            <label>First Name:</label>
            <asp:TextBox ID="txtFirstName" runat="server"/>
        </div>
        <div>
            <label>Last Name:</label>
            <asp:TextBox ID="txtLastName" runat="server"/>
        </div>
    </fieldset>

我定义了这个 CSS

form fieldset 
{
    clear: both;
    border-width: 0px;
    border-style: none none none none;
    padding: 0px;
    margin: 0px;
}

form fieldset div 
{
    clear: left;
    display: block;
    margin: 10px 0px 10px 0px;
    padding: 0px;
    vertical-align: central;
}

form fieldset div label {
    display: block;
    float: left;
    /*width: 150px;*/
    padding: 1px 20px 0px 0px;
    text-align: left;
    vertical-align: central;
}

外观很干净，但我在标签的最后一个样式中注释了宽度属性，以便将来使其通用。所以我为我的特定表单添加了一种新样式，并将此类添加到字段集中，但它不起作用。我丢失了标签的宽度，如何解决这个错误？

form fieldset div label .signup {
    width: 150px;
}

Answer 1

您的选择器不正确。您想要的可能是:

form fieldset.signup div label {
    width: 150px;
}

附带说明一下，我建议阅读 CSS 选择器以更多地了解语法。见:

1. > Selectors Level 3
2. > MDN (Selectors)
3. > MSDN (Understanding CSS Selectors)