如何使用CSS在fieldsets中设置标签样式？

Question

我已经尝试了CSS选择器上提到的所有可能的方法,但我还没有设法改变仅在fieldset元素内部的标签的样式.你能告诉我我做错了什么吗？

视图:

<div class="container">  
<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">                
            <div class="col-md-8 portfolio-item">

                <fieldset>
                    <legend>Details</legend>

                    <div class="col-md-4 portfolio-item" >                            
                        @Html.LabelFor(m => m.ID):
                        @Html.DisplayFor(m => m.ID)
                        <br />

                        @Html.LabelFor(m => m.Name):
                        @Html.DisplayFor(m => m.Name)
                        <br />

                        @Html.LabelFor(m => m.Surname):
                        @Html.DisplayFor(m => m.Surname)
                        <br />
                    </div>

                    <div class="col-md-8 portfolio-item" >
                        @Html.LabelFor(m => m.Department):
                        @Html.DisplayFor(m => m.Department)
                        <br />

                        @Html.LabelFor(m => m.Address):
                        @Html.DisplayFor(m => m.Address)
                        <br />

                        @Html.LabelFor(m => m.City):
                        @Html.DisplayFor(m => m.City)
                        <br />
                    </div>
                </fieldset>

            </div>
        </div>
    </div>
</div>
</div>

我尝试了很多不同的CSS选择器组合,以便仅将样式应用于fieldset元素内部,如下所示:

CSS:

fieldset > label {
        text-align: left !important;
        }

fieldset + label {
        text-align: left !important;
        }

div.row fieldset > label {
        text-align: left !important;
        }

更新:这里是渲染的Html代码

<div class="container">   
<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-8 portfolio-item">

                <fieldset>
                    <legend>Details</legend>

                    <div class="col-md-4 portfolio-item">                            
                        <label for="ID">ID</label>:
                        200
                        <br>

                        <label for="Name">Name</label>:
                        Smith
                        <br>

                        <label for="Surname">Surname</label>:
                        Boyton
                        <br>
                    </div>

                    <!-- removed for brevity -->

                </fieldset>                    
            </div>
        </div>
    </div>
</div>
</div>

Answer 1

这很简单

fieldset label {
  text-align: left;
}

你的css不工作的原因是因为你的目标是错误的元素.你想要的是fieldset 的一般后代.所以任何级别的孩子都会受到影响.

您简化的HTML是:

<fieldset>
 <legend />
 <div>
   <label/>
 </div>
</fieldset>

fieldset > label正在寻找一个标签,该标签是该字段集的直接子节点.但既然你把它包裹在一个div中,那就不是这样了.

fieldset + label正在寻找一个标签,它是fieldset 的兄弟(在同一级别上).标签是fieldset的子项,因此此规则不会以您想要的为目标.

有关CSS中选择器的更多信息,请快速阅读https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors.

小提示:一般情况下,您希望避免使用!important声明,因为它可能会覆盖您将来要进行的任何更改.