0

私が取り組んでいるWebサイトには、上部にナビゲーションバーがあり、順序付けされていないリストを使用して作成されています。Facebookボタンを追加して、ナビゲーションバーの残りの部分とインラインにする必要がありますが、ナビゲーションバーと同じCSSスタイルプロパティ（つまり、その特定のリストに関連するCSSプロパティ）を使用しないようにします。Facebookボタンをナビゲーションバーとインラインにすることができるが、それに異なるスタイルを適用できるようにコードを書く方法はありますか？

ありがとう！

4

3 に答える 3

4

!important の使用は控える必要があります。これは悪い習慣です。継承されたスタイルをオーバーライドするために機能しますが、CSS 構造を階層化してより強力な CSS を作成することで同じことを実現できます。重要なルール。

http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

Facebook ボタンのスタイルを変更するには、単純に ID (例: #facebook) を指定し、それを使用して特定のスタイルを指定します。

li#facebook {
    padding: 0; 
    margin: 0;
}

これにより、これらのスタイルが facebook の ID を持つ要素にのみ適用されます。

于 2013-02-03T19:51:26.720 に答える
0

はい、!important宣言で親 CSS をオーバーライドする Facebook 要素に個別のスタイルを設定できます。こちらのサイトが分かりやすく解説しています。

CSS がないと使い方を説明するのは難しいですが、例を考えてみましょう。これは、特定のリスト ( li) 要素の親 CSS スタイルです。

li {
  padding: 20px;
  margin 0 5px 0 5px;
  background-color: #ffc;
}

paddingしたがって、Facebook 要素にorを継承させたくない場合はbackground-color、というクラス#facebookを設定してから、次のように設定します。

li#facebook {
  padding: 0 !important;
  background-color: transparent !important;
}

これにより、#facebook要素が 0paddingになり、background-color透明に設定されます。

しかし、私が言ったように、CSS なしで確実な答えを出すのは難しいので!important、自分の設定で試して、必要な結果を得る必要があります。

于 2013-02-03T19:43:32.790 に答える
0

穀物に逆らうのはどうですか？

たとえば、フェイスブックのリンクを最初のメニュー項目にして、li のすべての権利をフロートさせます。次に、:first-child を使用して Facebook のメニュー項目をスタイルアップし、CSS 要素の使用に識別子は必要ありませんか?

HTML:

<ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
</ul>

CSS:

* {
    padding:0;
    margin:0;
}

ul {
    float:right;
    list-style:none;
}
li {
    float:right;
    margin:0 0 0 20px;
}
li a {
    float:right;
    text-decoration:none;
    color:#000;
}
li:first-child a {
    font-weight:bold;
    color:#f00;
}

例を次に示します: http://jsfiddle.net/seemly/wMWHc/

于 2013-02-03T21:30:54.780 に答える