如何强制一个div使用css样式？答案

【问题标题】：How to force a div to use css style?如何强制一个div使用css样式？
【发布时间】：2023-01-06 23:05:37
【问题描述】：

我在一个剃刀文件中有多个组件，我无法修改这些组件基础。这些组件没有“style”和“css”属性。其中之一生成一个具有以下结构的div

<div class="pr-6 pl-3 py-4 ">
    <div class="flex space-x-4">
    </div>
</div>

我应该在 div 上应用 width: 100%;，例如具有样式的 style 或 class。

我试图在 xy.razor.css 文件中添加新的 css 类，但找不到 div 并且无法应用样式。

我试过（以及其他一些非常基本的东西）：

::deep div.pr-6.pl-3.py-4 {}
.pr-6.pl-3.py-4 {}

我自己不是 CSS 向导。有什么办法可以解决这个问题吗？

p.s.: 用 JS 查找 DOM 元素并在元素上应用类不是办法 :D

【问题讨论】：

你可以在p{color: red !important; }这样的样式之后使用!important，但请注意，它会强制元素具有此样式，你将无法覆盖它。 :D
@DevRudra 我知道 !important，但我无法引用特定的 div。这就是问题所在。
目前还不是很清楚你的问题是什么 - 为什么你尝试的课程没有工作（是因为你错过了 py4 上的破折号）？那个 html 是您要定位的 div 吗？
抱歉打错了，我错过了问题上的“-”，但不在我的文件中

标签： html css razor blazor

【解决方案1】：

问题只是 html 对象和/或样式定义中的类名中的拼写错误吗？

而不是.pr-6.pl-3.py4 {} 例如

<style type="text/css">
  div.pr-6.pl-3.py-4 {
    width: 100%;
  }
</style>

<div class="pr-6 pl-3 py-4 ">
    <div class="flex space-x-4">
    </div>
</div>

【讨论】：

你不应该回答错字问题，因为它们与 SO 无关——你应该投票关闭它（如果你有足够的代表）