Can't target CSS selectors which work in dev tools

Question

Screenshot of the issue

Hello guys, I'm trying to remove the padding from a lightbox in my page builder. When I go into Chrome inspector and add attribute of:

style="padding: 0;"

The change appears in the screen how I'd expect it. However, when I copy the HTLM selectors and apply this CSS (at the bottom of the stylesheet), nothing happens. Here's my CSS, please note I've tried with and without spaces between the classes (because I'm new to this). Update: adding !important fixed it.

.fl-node-58c7610c1222e.fl-button-lightbox-content {
    padding: 0;
}

When I right click and select 'copy selectors,' I get this ID on the clipboard which I can't see in the HTML:

#yui_3_5_1_1_1489587619181_788

Because of this mysterious ID I've also tried the following CSS, with and without spaces between the classes/ID:

.fl-node-58c7610c1222e.fl-button-lightbox-content#yui_3_5_1_1_1489587619181_788 {
        padding: 0;
    }

Still, no joy. Could somebody help me out?

Thanks

Answer 1

我认为这只需要：

.fl-node-58c7610c1222e.fl-button-lightbox-content {padding: 0 !important}