セレクタがWordpressの電話番号のテキストの色を変更しようとしています

Question

Wordpressサイトのスタイリングを無効にしようとしています。私はChromeの開発ツールで見たときにこれは、クラスの実際のテキストです

@media (max-width: 1100px) { 
    .phone-text { 
    color: black; 
    } 
} 

：私は何をしようとしているが、このようなメディアクエリを作成しますされています。何らかの理由で、サイトのカスタムCSS部分にこれを入力すると、テンプレートのスタイルが上書きされません。

更新：

は、次のことを試みるように助言を受け：

@media (max-width: 1100px) { 
     #masthead .header-right-wrap .extract-element .phone-text 
     { 
     color: black; 
     } 
} 

を私はより具体的なセレクタを使用して、これは、色をオーバーライドしていないのロジックを取得します。開発ツールではうまくいくと思われますが、おそらくWordpressには奇妙なことがありますか？

Answer 1

ハリーは上記のコメントのとおりです。 CSSはすべて特異性に関するものです。このように考えてみましょう： 私は部屋がいっぱいになって、「こんにちは！すべての人が回ります。私が同じ部屋に入って「こんにちは、デイブ！ Daveという人だけが反応します。私が「おい、Dave Nelson！ 1人の男にしか適用されない可能性があります。より具体的な命令が「勝つ」。

ブラウザは、.phone-textに適用するCSSと、同じプロパティを適用する#masthead .header-right-wrap .extract-element .phone-textを比較します。より具体的なものが勝つ。色#fffがレンダリングされます。 ".header-right-wrapの内側にある.extract-elementの内側にある.phone-textは、" #masthead "に表示される" .phone-text "よりもはるかに具体的です。

.phone-textをそのコンテナのケイデンスの外に移動した場合、あなたの色が適用されます。 #masthead .header-right-wrap .extract-element .phone-textが設定されていない、境界線のようなプロパティを設定した場合は、ちょうど.phone-textとなります。