cocoon（wordpress）のカスタムcssに投入すると反映されない

前提・実現したいこと

自分のエディタでは反映されるのにcocoon（wordpress）のカスタムcssに投入すると反映されない箇所があります。
!importantを使わない、セクレタの優先度、記述順の優先度等は意識しているつもりです。

「V」マークの表示をPC画面でのみ消したいです。
なぜかwordpressに投入すると効かなくなってしまいます。
コード、長いですがどこがいけないかわからないので全て載せておきます。
インデントぐちゃぐちゃですみません！
HTMLのヘッダーでfontawesomeのリンクは読み込んでいます。

.fas {
visibility: visible;　
}
と
.fas {
visibility: hidden;　
}
の個所がうまく反映されなくなります。

該当のソースコード

HTML
1  <body>
2    <div class="pref-select">
3      <p><span id="red">都</span>道府県から探す</p>
4    </div>
5
6    <div class="accbox">
7      <!--ラベル1-->
8        <input type="checkbox" id="label1" class="cssacc" />
9        <label for="label1" class="area"><i class="fas fa-angle-down fa-fw"></i>北海道・東北</label>
10        <div class="accshow">
11
12
13<div class="prefecture">
14          <p><a href="#">北海道</a></P>
15          <p><a href="#">青森</a></P>
16          <p><a href="#">岩手</a></P>
17          <p><a href="#">宮城</a></P>
18          <p><a href="#">秋田</a></P>
19          <p><a href="#">山形</a></P>
20          <p><a href="#">福島</a></P>
21     
22<div class="clear"></div>
23        </div>
24        
25<input type="checkbox" id="label2" class="cssacc" />
26<label for="label2" class="area"><i class="fas fa-angle-down fa-fw"></i>関東</label>
27<div class="accshow">
28<div class="prefecture">
29  <p><a href="#">茨城県</a></P>
30<p><a href="#">栃木県</a></P>
31<p><a href="#">群馬県</a></P>
32<p><a href="#">埼玉県</a></P>
33<p><a href="#">千葉県</a></P>
34<p><a href="#">東京都</a></P>
35<p><a href="#">神奈川県</a></P>
36
37        </div>
38        <div class="clear"></div>
39        </div>
40
41       
42  </body>
43</html>

css
1.pref-select span{
2  color: #FF003F;
3}
4
5.pref-select p{
6  font-weight: bold;
7}
8
9.accbox input {
10      display: none;
11  }
12
13
14    .accbox label {
15
16        display: block;
17        background-color:#323232;
18        color: #ffffff;
19        padding: 5px 0px;
20        margin-bottom: 10px;
21        border-radius: 5px;
22        border-left: solid 3px #FF0000;
23      }
24
25.prefecture{
26  color: #323232;
27}
28
29@media all and (min-width: 768px) {
30  .accbox label {
31    text-align: center;
32    height: auto;
33    width: 20%;
34  }
35.area , .prefecture {
36  float: left;
37  }
38.prefecture  p {
39  float: left;
40  margin: 10px 5px 16px;
41}
42.clear {
43  clear: both;
44}
45.fas {
46  visibility: hidden;　
47}
48}
49
50
51
52
53/*スマホ画面用*/
54@media all and (max-width: 767px) {
55
56/*ボックス全体*/
57.accbox label {
58    display: block;
59    width: 100%;
60    background-color:#323232;
61    color: #ffffff;
62    border-radius: 5px;
63    border-left: solid 5px #FF0000;
64  }
65  .fas {
66    visibility: visible;　
67  }
68
69.accbox {
70    margin: 2em 0;
71    padding: 0;
72    max-width: 400px;
73
74}
75
76/*ラベル*/
77.accbox label {
78    display: block;
79    margin: 1.5px 0;
80    padding : 13px 12px;
81    cursor :pointer;
82    transition: all 0.5s;
83    cursor :pointer;
84    transition: all 0.5s;
85}
86
87
88
89/*アイコンを表示*/
90.accbox label:before {
91    content: '\f054';
92    font-family: 'FontAwesome';
93    padding-right: 8px;
94    display:none;
95}
96
97/*ラベルホバー時*/
98.accbox label:hover {
99    background :#656565;
100
101}
102
103/*チェックは隠す*/
104.accbox input {
105    display: none;
106}
107
108/*中身を非表示にしておく*/
109.accbox .accshow {
110    height: 0;
111    padding: 0;
112    overflow: hidden;
113    opacity: 0;
114    transition: 0.8s;
115}
116
117/*クリックで中身表示*/
118.cssacc:checked + label + .accshow {
119    width: 100%;
120    height: auto;
121    margin: 1.5px 0;
122    padding : 13px 12px;
123    border-radius: 5px;
124    background: #E5E5E5;
125    opacity: 1;
126
127    }
128  }

kei344

2019/12/16 08:37

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

madone99

2019/12/17 01:38

キャッシュをクリアしても変化はないでしょうか?

sala_33

2019/12/17 02:39

ご回答いただきありがとうございます！キャッシュのクリアも試しました。この度以下の内容で解決に至りました。お忙しい中ご思案いただきありがとうございました。

行動規範の内容に同意します

回答2件

自己解決

FontAwesomeのバージョンに原因がありました。
cocoonのデフォルト設定（４）と私の使用バージョン（５）が違っていたことが問題でした。

参考リンク
https://wp-cocoon.com/site-iconfont/

上記リンクの対応をすると、自作エディタ画面同様にFontAwesomeが反映されました。

この度アドバイスをくださった皆様、本当にありがとうございました。

投稿2019/12/17 02:35

sala_33

総合スコア5

少なくとも下記場所に全角空白が入っており、エラーになっています。

CSS
1.fas {
2  visibility: hidden;/*　*/
3}

投稿2019/12/16 14:49

kei344

総合スコア69416

sala_33

2019/12/17 01:34

ご回答をいただきありがとうございます！全角空白を取り除いても解決しませんでした。自作エディタ画面では適応されるのにWordPressにコピペ投入したら反映されなくなるという事は、wordpress部分のcssでなにか打ち消しの要素があると予想しています。上記cssのみでその他原因を思しき箇所が見つかりましたらご指摘ください。

行動規範の内容に同意します

あなたの回答