Wordpress子テーマからのCSSカスタマイズ

Question

TCDのWordpressテーマ”Precious”を購入し子テーマを作り追加CSSでカスタマイズをしてみたのですが上手く反映されません。
bodyでバックグラウンドを変えたところ反映されるのですが他のクラス等でCSS記述してみても変わりません
現在styl.css functions.phpは下記の記述をしているのですが、なにか記述が足りないのでしょうか
いろいろ調べて試したのですが上手くいかないので教えていただけると助かります
よろしくお願いいたします。

【style.css】
/*
Theme Name:Precious child
Theme URI:
Description:WordPressテーマ「Precious」の自作子テーマです。
Template:precious_tcd019
Author:Tashi
Author URI:https://tcd-theme.com/
Version:4.0.2
*/

【functions.php】
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

Comments

[Lhankor_Mhy]

詳細度の問題ということはないですか？

[FTashi]

ご連絡ありがとうございます。
あまり詳しくなくて申し訳ないのですが詳細度の問題とはどういったことでしょうか？

[Lhankor_Mhy]

CSS詳細度のことです。
http://pepabo.github.io/css/specificity/

[FTashi]

ありがとうございます。
確かにcssに!importantを指定したところ反映されました
そのままのclassでは優先されないということなんでしょうか
HLMLで新たにclass セレクタを追加記述して追加CSSで指定するといったことでよろしかったでしょうか

[Lhankor_Mhy]

いえ、それではダメですね。
親テーマ以上の詳細度にする必要があります。先ほどの文書をよく読むのがいいと思いますよ。

[FTashi]

body .class {color:red;}
のようにbodyを追加したところ上手く反映されたのですが良くないでしょうか

[Lhankor_Mhy]

あ、もしかして、詳細度を増やすためにクラスを追加する、という意味ですか？
それでしたら、そこまでする必要はないです。

子テーマCSSは親CSSより後に読むと思いますので、同じ詳細度であれば上書きされるはずなので。
たとえば、親CSSを丸コピーしてプロパティの部分だけ書き換えれば、必ず親CSSと同じ詳細度になるはずです。

[Lhankor_Mhy]

> bodyを追加したところ上手く反映されたのですが良くないでしょうか

それもアリですね、上手くいかない場面もあると思いますが。

[FTashi]

検証ツールで親CSSを丸コピーしてプロパティの部分だけ書き替えたのですがダメでした
ご丁寧にご対応いただきありがとうございます
もう少し自分でも調べてみます

[Lhankor_Mhy]

そうすると、同じ要素に対して別のルールがいくつか設定されているのかもしれないですね。
Computed タブからプロパティをブレイクダウンしてみると、どこで上書きされているかわかりますよ。

[FTashi]

そうゆうことなのですね
本当にありがとうございます。