如何在CSS中全局覆盖`class-name> *：last-child`

Question

如果我想覆盖特定性不起作用的CSS类，请使用以下格式，效果很好。

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

但是如何覆盖bx--modal-content > *:last-child形式的类？ 以下内容不起作用。

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

Answer 1

您的选择器无效

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

您没有类属性为“ bx--modal-content> *：last-child”

您真正想要的是

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

这将选择div中包含的最后一个子元素，其类属性精确等于bx--modal-content。它会不匹配类似<div class="bx--modal-content small">

的内容

Answer 2

作为例外，您可以在第一个CSS中使用!important后缀，以便忽略特异性规则。将其放在结尾;

之前

Answer 3

尝试这样

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

或

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

Answer 4

选择器应为

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

> *:last-child不是课程的一部分，因此不应放在[ ... ]括号内。