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

【问题标题】：how to override the `class-name > *:last-child` in css globally如何全局覆盖css中的`class-name > *:last-child`
【发布时间】：2020-05-24 10:25:12
【问题描述】：

如果我想覆盖一个特殊性不起作用的 css 类，我使用以下格式，效果很好。

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

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

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

【问题讨论】：

请提供一个minimal reproducible example 来实际演示问题。使用相应的 HTML 更容易调试 CSS 问题。特异性工作你只需要想出一个更具体的规则。 !important 是绝对的最后手段。使用您选择的浏览器中的开发人员工具来检查导致您出现问题的元素。这是克服特异性问题的最佳方法。

标签： css css-selectors css-specificity

【解决方案1】：

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

之前

【讨论】：

【解决方案2】：

这样试试

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

或

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

【讨论】：

【解决方案3】：

您的选择器无效

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">

【讨论】：

据我所知：如何匹配
？我们应该使用下面的所有类吗？ div[class="bx--modal-content small"]
这可行，但您最好使用class selector。例如div.bx--modal-content 将匹配所有带有bx--modal-content 类的div，不管它在类列表中的位置。如果您想选择包含这两个类的任何 div，您将使用 div.bx--modal-content.small

【解决方案4】：

选择器应该是

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

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

【讨论】：