I'm using a child theme and I'm using a "styles.css" file to override things from the parent theme. My styles (there are many stylesheets) are enqueued like this:
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_stylesheet_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
wp_enqueue_style('shopkeeper-top-bar', get_stylesheet_directory_uri() . '/css/header-topbar.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-headers', get_stylesheet_directory_uri() . '/css/headers.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-responsive', get_stylesheet_directory_uri() . '/css/responsive.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-custom', get_stylesheet_directory_uri() . '/css/custom_artiq.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-navigations', get_stylesheet_directory_uri() . '/css/navigations.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-animate', get_stylesheet_directory_uri() . '/css/animate.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-app', get_stylesheet_directory_uri() . '/css/app.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-defaults', get_stylesheet_directory_uri() . '/css/defaults.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-easyzoom', get_stylesheet_directory_uri() . '/css/easyzoom.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-header-centered-2menus', get_stylesheet_directory_uri() . '/css/header-centered-2menus.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-idangerous-swiper', get_stylesheet_directory_uri() . '/css/idangerous.swiper.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-nanoscroller', get_stylesheet_directory_uri() . '/css/nanoscroller.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-offcanvas', get_stylesheet_directory_uri() . '/css/offcanvas.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-owl-carousel', get_stylesheet_directory_uri() . '/css/owl.carousel.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-owl-theme', get_stylesheet_directory_uri() . '/css/owl.theme.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-responsive', get_stylesheet_directory_uri() . '/css/responsive.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-select2', get_stylesheet_directory_uri() . '/css/select2.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-woocommerce-overwrite', get_stylesheet_directory_uri() . '/css/woocommerce-overwrite.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-fontawesome', get_stylesheet_directory_uri() . '/inc/fonts/font-awesome/css/font-awesome.min.css', array(), '1.0', 'all' );
wp_enqueue_style('shopkeeper-styles', get_stylesheet_directory_uri() . '/css/styles.css', array(), '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
But if I change something in "styles.css" in the child theme and then use the inspector in Chrome for example, I see that the styles coming from "index" (root/wordpress/:385) prevail. I have to use !important in the stylesheet to see any change. How can I solve this and what exactly is this index?
!important
If it's not you could try using more descriptive selectors (adding a new selector could mean your css is prioritized). Finally try another browser, and see if you're wiser that way.