CSS 浮动和文本对齐仅作为内联工作

Question

我有一个使用 ASP .net core 2.1 完成的应用程序。 我修改它是脚蹼的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>