I just ran into a hair pulling experience working on a child theme for a customer. 
There is a small gallery section needed for the five partners on the site. The gallery has a picture of each partner in a block on the right, then a short bio on the right with a link to their page and a link to their LinkedIn profile.
I found a very good gallery plugin on the WordPress.org Plugins site. Of course, it had limited features because free is such a bad business model.
The pictures the client supplied were too low resolution for the gallery’s default image css width. So I tried a few regular Child Theme CSS tricks but they didn’t work because it “looked” like they were enqueing a stylesheet later than the child theme css and with !important. So, OK, I’ll fix that by enqueing a custom theme for the styling after all the the css sheets:
//enqueue style override for portfolio
add_action('wp_enqueue_scripts', 'mg_styles', 9999);
function mg_styles() {
wp_register_style('mg-portfolio.css', get_stylesheet_directory_uri().'/mg-portfolio.css' );
wp_enqueue_style('mg-portfolio.css');
}
Well cr*p. That didn’t work. WTF is going on? Aha, says I to myself as I’m looking at their plugin structer, they are inserting the CSS with JavaScript. So I checked out the JavaScript. Yep. They were inserting a <style> section right in the middle of the content section!
Well, tricky / clever plugin devs, two can play that game. I’ll just insert
<?php the_content(); ?>
<!--Style to override the !important styling inserted by the gallery plug-in-->
<style type="text/css">
.portelement_2 div.left-block_2 .main-image-block_2 img {
margin: 0px !important;
padding: 0px !important;
width: 140px !important;
height: auto;
}
</style>
Yep – that worked!
