如何使用 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. 选择器级别 3
2. MDN （选择器）
3. MSDN （了解 CSS 选择器）

Answer 2

这应该有效：

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

Answer 3

你试过吗

min-width: 150px !important;

Answer 4

您使用的是一长串后代 CSS 选择器，并且文档中没有这样的层次结构。使用逗号对选择器进行分组。空格表示后代。此外，使用>来指示直接子级比后代更有效。