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规则的应用顺序，因此请尝试添加具有更高特异性的选择器，直到获得所需结果为止。

从链接的网站上

：

以下选择器类型列表按其特异性增加：


类型选择器（例如<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>  <div class="ap-create-story-panel-wrap" data-panel="basicinfopanel"> <input type="text"> </div> <a class="btn-basicinfopanel" data-target="certificatepanel">Save/Next</a> <div class="ap-create-story-panel-wrap" data-panel="certifypanel"> <input type="text"> </div> <a class="btn-certifypanel" data-target="certifypanel">Save/Next</a> <div class="ap-create-story-panel-wrap" data-panel="photopanel"> <input type="text"> </div> <a class="btn-photopanel" data-target="photopanel">Save/Next</a>）和伪元素（例如h1）。

类选择器（例如::before），属性选择器（例如.example）和伪类（例如[type="radio"]）。

ID选择器（例如:hover）。


其他规则：


通用选择器（#example），组合器（*，+，>，~，' '）和否定伪类（||）对特异性没有影响。   （但是，在:not()中声明的选择器可以。）

添加到元素的内嵌样式（例如:not()）始终会覆盖外部样式表中的所有样式，因此   可以认为具有最高的特异性。

style="font-weight: bold;"规则：在样式声明上使用!important规则时，该声明将覆盖所有其他声明。

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

!important

就像您提到的那样，如果所有其他方法都失败了，则可以使用完全覆盖所有CSS选择器的不良做法方法：内联样式或/* 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规则：

!important

CSS浮动和文本对齐仅作为嵌入式

1 个答案: