CSS float和text align仅作为内联使用

Question

我有一个使用ASP .net core 2.1完成的应用程序。我修改它是scuffolded crud详细信息页面。但是我被困在dl，dt和dd元素上。

dt元素中包含字段名称的文本与右侧相邻。无论我做了什么我都无法改变它，除了我添加和内联样式代码。我把下面的代码放在文件的样式部分：

<style>
    dd {
        min-width: 120px;
        background: #dd0
    }

    dt {
        float: left;
        background: #cc0;
        text-align: left;
    }
</style>

此代码在浮动和文本对齐方面没有任何变化，但它确实对背景生效，如下图所示。

但是，当我将这些显示设置放在内联如下所示时，它对于上图中的那些线条来说效果很好。

<dt style="text-align: left; max-width: 70px;">
                        @Html.DisplayNameFor(model => model.PatientName)
                    </dt>
                    <dd>
                        @Html.DisplayFor(model => model.PatientName)
                    </dd>
                    <dt style="text-align: left;min-width: 70px;">
                        @Html.DisplayNameFor(model => model.PatientAddress)
                    </dt>

这让我觉得它可能是一个设置的层次结构，但我甚至尝试了引导程序，再没有运气。

而且我不想将设置内联，因为这是一种不好的做法。

Answer 1

CSS Specificity确定应用CSS规则的顺序，因此请尝试添加具有增加特异性的选择器，直到获得所需的结果。

来自链接的网站：

以下选择器类型列表按特定方式增加：

1. 类型选择器（例如，h1）和伪元素（例如，::before）。
2. 类选择器（例如，.example），属性选择器（例如，[type="radio"]）和伪类（例如，:hover）。
3. ID选择器（例如，#example）。

其他规则：

• 通用选择器（*），组合子（+，>，~，' '，||）和否定伪类（:not()）对特异性没有影响。 （然而，在:not()内宣布的选择器确实如此。）
• 添加到元素的内联样式（例如，style="font-weight: bold;"）总是覆盖外部样式表中的任何样式，因此可以被认为具有最高的特异性。
• !important规则：当在样式声明上使用!important规则时，此声明将覆盖任何其他声明。

以下是基于上面列出的类型的选择器示例，您应该尝试：

/* Type selectors (your current method): */

dd
dt

/* Class selectors (either directly on elements, or on parent <table class="my-table"> */

dd.my-class
dt.my-class
/* or */
table.my-table dd
table.my-table dt

/* ID selectors (either directly on elements, or on parent <table id="my-table"> */

dd.my-dd
dt.my-dt
/* or */
table#my-table dd
table#my-table dt

就像你提到的那样，如果所有其他方法都失败了，你可以使用完全覆盖所有CSS选择器的不良练习方法：内联样式或!important规则：

<style>
    dd {
        min-width: 120px !important;
        background: #dd0 !important;
    }

    dt {
        float: left;
        background: #cc0 !important;
        text-align: left !important;
    }
</style>