如何使用CSS仅在字段集内样式标签？

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>

- Jack

---

我不确定这个问题是否与 [tag:less] 有关。即使使用反编译的 CSS，问题仍然存在吗？如果是这样，您应该在此处发布纯 HTML/CSS，并删除无关的标签。 - TylerH

我在 HTML 中没有看到标签元素，但对于这样的结构： - asiop

我在你的代码中看不到任何直接的标签。 - Richa

正在生成的DOM是什么？ - sjm

Answer 1

这很简单

fieldset label {
  text-align: left;
}

你的 CSS 无法生效是因为你选错了元素。你需要一个 通用后代选择器 来选取 fieldset 元素。这样任何一级子元素都会受到影响。

你简化后的 HTML 是：

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

标签中的label选择器是查找直接子元素为

的元素。但是由于你将它包裹在

元素中，所以这不成立。

fieldset + label选择器是查找和

同级别的兄弟元素。由于是

的子元素，所以这个规则不能达到你想要的效果。

了解CSS选择器的更多信息，请阅读https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

小提示：通常情况下，你应该避免使用!important声明，因为它可能会覆盖你未来想要做出的任何更改。

- stevenw00

---

非常感谢。我也尝试过这种方法，但第一次没有成功（可能是我使用了 legend 而不是 fieldset）。但现在它可以工作了 :) - Jack

Answer 2

应该只是这样：

    fieldset label {
        text-align: left;
    }

'

'符号是直接子选择器，即您的fieldset和label之间有一个DIV，它将是fieldset的直接子级。

此外，'+'符号是下一个同级选择器，这就是为什么那样不起作用的原因。

'

- sjm