Can style "display: block" overrule "display: none" of media print CSS?

Question

Here is an HTML element:

<div id="cboxOverlay" style="display: block; opacity: 0.9; cursor: pointer;" class="price_match_no_print"></div>

Here is some CSS:

@media print {
    .price_match_no_print {
        display:none;
    }
}

Now when I print the page, the above HTML element comes on the print?

Does the style display: block overrules the display: none of @media print?

Answer 1

@media rules themselves don't have any specificity and because you're adding CSS rules via inline styles, they will always override any external styles that aren't using an !important rule. So in this case, your only option is:

@media print {
    .price_match_no_print {
        display:none !important;
    }
}