как переопределить `class-name> *: last-child` в css глобально

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"

Что вы действительно хотите is

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

Это выберет последний дочерний элемент, содержащийся внутри div с атрибутом класса точно , равным bx--modal-content. не будет соответствовать чему-то вроде <div class="bx--modal-content small">

Answer 2

Селектор должен быть

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

> *:last-child не является частью класса, поэтому он не должен быть в скобках [ ... ].

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

Вы можете использовать, как исключение, суффикс !important в своем первом css, так что правила специфичности игнорируются. Поместите его перед трейлингом ;