WordPressテーマSANGOの質問

blockquoteに対するCSSが効かない

アバター
goga

もう一度、「反映されないときの対処法まとめ」を読み込み考えたところ、原因が分かりました。ですが、一部どうすればいいのか分からない箇所があります。
お忙しいところ恐縮ですが、教えていただければ幸いです。

blockquoteでそのまま子テーマCSSに書き込んだだけでは、親テーマの方のblockquoteが一部しゃしゃり出てきてデザインが崩れる箇所があるようでした。
そこで、blockquote#aとか#bというようにCSSに書き込み、記事投稿のhtmlでは

というように指定して、何とかデザインが反映されるようになりました。

しかし、それでもデザインによっては外枠のCSSがしゃしゃり出てきてしまって、おかしくなりまして、検証でよく見たところ、

blockquote {
position: relative;
padding: 10px 12px;
box-sizing: border-box;
font-style: italic;
color: #464646;
border-left: solid 50px #3ca5d4;
background: #e0f5ff;
}

このブロックのborder部分が原因だと分かりました。
border: solid 3px #72ccf4; というようにborder全体の指定がされているデザインはぴったり表示されるようになったのですが、上のようにborder-left: solid 50px #3ca5d4;となっているデザインは、borderの残りの部分に親テーマのborderが出てきてしまうようでした。

親テーマのborderが出てこないように、上記のCSSを反映させるには何を追記すればよいのでしょうか?

SANGOのボックス種類一覧
ボックス・枠を挿入する方法と種類一覧
コメントへの回答
サルワカくん
サルワカくん
2018/05/12

CSSの優先度の問題です。
CSSセレクタのblockquote.entry-content blockquoteに書き換えることで適用の優先順位が上がり、解決します。
見出しなども同様です。.entry-content h2などと書くことで優先度が上がります。