如何全局覆盖 css 中的 `class-name > *:last-child`

Question

如果我想覆盖 css class 其中特异性不起作用，我使用以下格式效果很好。

div[class="class-name"] {
        padding-bottom: 0;
    }

但是如何覆盖 bx--modal-content > *:last-child 形式的 class 呢？以下无效。

div[class="bx--modal-content > *:last-child"] {
        padding-bottom: 0;
    }

Answer 1

作为例外，您可以在第一个 css 中使用 !important 后缀，这样特异性规则将被忽略。将它放在尾随 ;

之前

Answer 2

这样试试

div[class="bx--modal-content > *:last-child"] {
        padding-bottom: 0 !important;
    }

或

:host /deep/ --> before the class if you want override plugins

Answer 3

您的select或无效

div[class="bx--modal-content > *:last-child"] {
        padding-bottom: 0;
}

您没有 class 属性 "bx--modal-content > *:last-child"

你真正想要的是

div[class="bx--modal-content"] > *:last-child] {
        padding-bottom: 0;
}

这将 select 包含在具有 class 属性的 div 中的最后一个子元素完全等于 bx--modal-content .它不会匹配<div class="bx--modal-content small">

Answer 4

选择器应该是

div[class="bx--modal-content"] > *:last-child {
  padding-bottom: 0;
]

> *:last-child 不是 class 的一部分，所以它不应该在 [ ... ] 括号内。

how to override the `class-name > *:last-child` in css globally