Earlier stylesheet not overriding later one

Question

I have made a child theme of a themify theme. I used thier example on enqueuing as well as my own. In both cases the child css is loaded after the parent.

Loaded on Line 53

<link rel='stylesheet' id='parent-style-css'  href='https://example.com/wp-content/themes/themify-ultra/style.css?ver=4.7.3' type='text/css' media='all' />

Loaded on Line 69

<link rel='stylesheet' id='theme-style-css'  href='https://example.com/wp-content/themes/Ultra-Child/style.css?ver=1.0.0' type='text/css' media='all' />

However the elements in the line 53 file override the 69 file. I have tried a few things that have changed positions and one that even loads the same child stylesheet twice. The earlier stylesheet caches and overrides unless I change the version number. It still overrides but will update if I change the version. Exact same elements in both files, one change, no !important. Why is the first one overriding the second?

This is the entire Child functions.php:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_parent_styles', 9);

function theme_enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Answer 1

I looked at my child theme's functions.php and I found that I had commented out the line to enqueue the child style.css. I'm guessing that the stylesheet is loaded automatically because that is the active theme. I would suggest you try not explicitly loading your child theme's stylesheet and see if that helps.

P.S. Only include the styles in your child stylesheet that need to be overridden. In other words, at this point, you should only have styles for h1, h2, h3, et al.

Answer 2

Themifies built in minification was inlining the parent CSS after the child. Which is why I could not find it, I was not looking for inline CSS.

Chromes console still showed it as the remote CSS file even though it was inlined.

Disabling the built in minification fixed the issue.