0

私はWordpressサイトをいじっていて、フロントページの行動を促すために.emailという要素のクラスを作成しました。

.class をセレクターとして使用すると、行った変更が反映されません。ただし、Chrome で inspect 要素を使用する場合はそうします。

私の知る限り (私は開発者ではありません)、.someclass を使用するだけでグローバルに選択できます。ただし、これはここでは機能していないようです。

この質問に対して表示するコードを選択する際に、私にはよくわかりません。サイトはこちら: tinyurl.com/m562wgd

ページの真ん中に、スタイルを適用したいメールアドレスがありますが、.email では選択できません。

html は次のとおりです。

<div class="front-call-to-action">

                <div class="front-button">

    <a class="phonenumber" href="" >
                    Call: 647.832.8626              </a> 

                <!--20130607 Gavin added email address to CTA -->
                <br />
                <a class="email" href="mailto:gavin.patchwood@gmail.com">gavin.patchwood@gmail.com</a>


            </div>
            </div>

ここに私が試していたCSSがあります：

.email {
    font-style: italic;
    font-size: 0.8em;
    }
4

4 に答える 4

2

クラスはありますが、スタイルは表示されません。これは、タイプミスを意味するか、そもそもスタイルが存在しないことを意味する可能性があります.

スタイルがインスペクターに表示されたら、特定性の高いセレクターがスタイルをオーバーライドしていないことを確認してください。そうである場合は、セレクターをオーバーライドするものよりも具体的にする必要があります。

于 2013-06-07T16:58:46.447 に答える
1

お題はこちら！メディア クエリ内でスタイルを使用しました。それが機能していない理由です。機能させるには、メディア クエリ ブロックを閉じる必要があります。

http://patchwood.ca/wp-content/themes/orbit/style.css?ver=3.5.1

@media screen and (max-width: 400px) {
  #logo img {
    height: auto;
    width: 50%;
}
.footer-box {
    display: none;
    }
.email {
    font-style: italic;
    font-size: 0.8em;
    }

固定 CSS:

@media screen and (max-width: 400px) {
  #logo img {
    height: auto;
    width: 50%;
}
.footer-box {
    display: none;
    }
}
.email {
    font-style: italic;
    font-size: 0.8em;
}

編集：

max-width:600pxメディアクエリブロックも閉じます

@media screen and (max-width: 600px) {
  /* responsive menu*/
  .main-nav {
    display: none;
  }
  .tinynav {
    width: 100%;
    display: block;
  }
  .search-page {
    width: 100%;
  }
  #logo,
  #main-navigation,
  #content,
  aside,
  .footer-box,
  .footer-copy,
   .footer-credit,
  #front-text-feature {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin: 0 1.0416666666666665%;
  }
  .footer-box {
    width: 90%;
    margin: 0 5%;
  }
  #front-slide,
  .front-box {
    display: inline;
    float: left;
    width: 97.91666666666666%;
    margin: 0 1.0416666666666665%;
    margin-bottom: 16px;
  }
  #front-text-feature,
  #front-slide {
    padding: 12px 0;
  }
  #front-boxes,
  .front-features {
    margin-bottom: 24px;
  }
  .social-icons ul {
    margin: 12px 0 12px 0;
    text-align: center;
    height: auto;
  }
  .footer-copy {
    text-align: center;
  }
  .footer-credit {
    margin-top: 12px;
    text-align: center;
}
} //Add this extra block
于 2013-06-07T17:00:16.507 に答える