Question

我已经尝试了CSS Selectors中提到的所有可能方法，但我还没有设法更改仅在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无法工作的原因是因为你的目标是错误的元素。你想要的是字段集的一般后代。所以任何级别的孩子都会受到影响。

您简化的HTML是：

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

fieldset > label正在找到一个标签，该标签是该字段集的直接子。但是既然你已将它包装在一个div中，那就不是这样了。

fieldset + label正在寻找一个标签，该标签是字段集的兄弟（在同一级别上）。标签是字段集的子项，因此此规则不会定位您想要的内容。

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

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

Answer 2

应该只是：

    fieldset label {
        text-align: left;
    }

'＆gt;' symbol是直接子选择器，即你的fieldset和label之间的DIV，它将是fieldset的直接子项

此外，'+'符号是下一个兄弟选择器，这就是为什么它不起作用

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

2 个答案: