如何覆盖单个对话框窗口的 css 类的属性

Question

我在一个基于组件的框架中工作，该框架使用名为 window-header 的特定类自动设置模态对话框窗口的标题样式。

我可以根据我认为适合外部样式表的方式调整该类：

.window-header {
    opacity: 0;
    position: fixed;
    width: 10%;
    top: -2px!important;
    z-index: 1;
    height: 25px;
}

在这种情况下，标题被隐藏，但被利用以便用户可以在屏幕上拖动对话窗口。它是对话窗口上的单击和拖动区域。对于某些对话框窗口，我需要更改这个可拖动区域的宽度属性。

我可以为这些特定窗口的 div 动态添加一个 css 类，例如<div class="_12">。这是 html 的简化表示：

<div class="_12">
  <div>
    <div class="window-header">

我在同一个外部 css 文件中尝试了以下变体（它必须在同一个外部 css 中定义）：

._12 > .window-header {
   width: 95% !important;
}

变化包括在 ._12 和窗口标题之间使用两个“>”，并将 ._12 > 窗​​口标题定义移到“主”窗口标题定义之上。

但是宽度没有被覆盖。

问题 - 解决方案是什么？或者甚至可以针对这种特定情况覆盖 window-header 的 width 属性？

编辑 - 按照._12 > .window-header的建议进行调整

编辑 2 - 添加 DevTools 屏幕截图以显示宽度不会被覆盖

EDIT 3 - DevTools 屏幕截图的扩展视图

Answer 1

在不知道您使用的是什么框架的情况下，我猜您只需要为要覆盖另一个选择器的选择器提供更高的特异性分数。

如果样式表中的选择器只是 .window-header，那么它的特异性得分为 10，如果您的标记是您在上面显示的内容，那么这将起作用 ._12 div .window-header，因为它会得分 21 并且具有更高级别的特异性。您可以详细了解如何计算特异性here，甚至还有一个方便的calculator。

Answer 2

您的选择器过于具体。您还缺少window-header 上的类标识符。需要.window-header就用：

._12 .window-header

或者，您可以使用这个更详细的选择器：

._12 > * > .window-header

如果您仍然遇到问题，请查看 DevTools 中的 CSS，看看它可能在哪里被覆盖。在此页面上，您可以看到 min-width 属性被覆盖以及发生的位置。

Answer 3

这是你想要的吗？ 1.您不需要放置“>”符号。像我在示例中写的那样写就足够了。 2.你忘了在window-header前加上句号。这是一堂课。

.window-header {
    opacity: 0;
    position: fixed;
    width: 10%;
    top: -2px!important;
    z-index: 1;
    height: 25px;
    
    background-color: green;
}

._12 .window-header {
   width: 95%;
   opacity: 1;
}

<div class="_12">
  <div>
    <div class="window-header"></div>
  </div>
</div>