如何使用 CSS 仅在字段集中设置标签样式？

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 无法正常工作的原因是您定位了错误的元素。您想要的是字段集的 general descendant。所以任何级别的children都会受到影响。

你简化的HTML是：

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

fieldset > label 正在寻找一个标签，该标签是字段集的 直接 child。但是，由于您将其包装在 div 中，所以事实并非如此。

fieldset + label 正在寻找一个标签，该标签是字段集的 sibling（在同一级别）。标签是字段集的 child，因此此规则未针对您想要的内容。

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

小提示：通常您要避免使用 !important 声明，因为它可能会覆盖您将来要进行的任何更改。

Answer 2

应该是：

    fieldset label {
        text-align: left;
    }

“>”符号是直接子选择器，即在您的字段集和标签之间有一个 DIV，它将是字段集

的直接子选择器

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

如何使用 CSS 仅在字段集中设置标签样式？

How to styles labels only within fieldsets using CSS?

css

css-selectors