326

私はここで何が間違っているのですか？

私はを持っています.social divが、最初のものでは上部にゼロのパディングが必要で、2番目のものでは下部の境界線が必要ありません。

私はこの最初と最後のクラスを作成しようとしましたが、どこかで間違っていると思います。

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border-bottom: dotted 1px #6d6d6d;
}

.social .first{padding-top:0;}

.social .last{border:0;}

そしてHTML

<div class="social" class="first">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

2つの異なるクラスを持つことは不可能だと思いますか？もしそうなら、どうすればこれを行うことができますか？

4

9 に答える 9

583

1つの要素に2つのクラスが必要な場合は、次のようにします。

<div class="social first"></div>

次のようにcssで参照します。

.social.first {}

例：

https://jsfiddle.net/tybro0103/covbtpaq/

于 2012-08-11T23:31:24.893 に答える
34

あなたはこれを試すことができます：

HTML

<div class="social">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

CSSコード

.social {
  width:330px;
  height:75px;
  float:right;
  text-align:left;
  padding:10px 0;
  border-bottom:dotted 1px #6d6d6d;
}
.social .socialIcon{
  padding-top:0;
}
.social .socialText{
  border:0;
}

同じ要素に複数のクラスを追加するには、次の形式を使用できます。

<div class="class1 class2 class3"></div>

デモ

于 2012-08-12T08:41:42.180 に答える
23

各クラスをそのクラス属性内のスペースで区切ることにより、要素に複数のクラスを適用できることを忘れないでください。例えば：

<img class="class1 class2">
于 2017-05-17T18:22:26.623 に答える
15

.indent2つのクラス、つまりとがあれば.font、class="indent font"機能します。

あなた.indent.font{}はcssにある必要はありません。

class="class1 class2"クラスをcssで分離し、htmlでを使用して両方を呼び出すことができます。1つ以上のクラス名の間にスペースが必要です。

于 2017-11-06T17:15:02.283 に答える
10

アイテムが2つしかない場合は、次のように実行できます。

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border: none;
}

.social:first-child { 
    padding-top:0;
    border-bottom: dotted 1px #6d6d6d;
}
于 2012-08-11T23:40:56.720 に答える
6

親の最初の子である要素にのみスタイルを適用する場合は、:first-child疑似クラスを使用することをお勧めします

.social:first-child{
    border-bottom: dotted 1px #6d6d6d;
    padding-top: 0;
}
.social{
    border: 0;
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
}

次に、ルール.socialには共通のスタイルと最後の要素のスタイルの両方があります。

そして、.social:first-childそれらを最初の要素のスタイルでオーバーライドします。

:last-childセレクターを使用することもできますが:first-child、古いブラウザーでよりサポートされています。https：//developer.mozilla.org/en-US/docs/CSS/：first-child＃Browser_compatibilityおよびhttps://developer.mozilla.org/を参照 してください。 es / docs / CSS /：last-child＃Browser_compatibility。

于 2012-08-11T23:41:08.073 に答える
6

この投稿が古くなっていることは知っていますが、彼らが尋ねたものは次のとおりです。スタイルシート：

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border-bottom: dotted 1px #6d6d6d;
}
[class~="first"] {
    padding-top:0;
}
[class~="last"] {
    border:0;
}

しかし、セレクターを使用するのは悪い方法かもしれません。また、複数の「最初の」拡張子が必要な場合は、必ず別の名前を設定するか、セレクターを改良する必要があります。

[class="social first"] {...}

これが誰かに役立つことを願っています。状況によってはかなり便利です。

たとえば、多くの異なるコンポーネントにリンクする必要のある小さなcssがあり、同じコードを100回記述したくない場合です。

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}

div.myClass1.red {color:red;}
div.myClass2.red {color:red;}
...
div.myClassN.red {color:red;}

になる：

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}

[class~=red] {color:red;}
于 2015-10-28T19:35:19.500 に答える
5

別のオプションは、子孫セレクターを使用することです

HTML：

<div class="social">
<p class="first">burrito</p>
<p class="last">chimichanga</p>
</div>

CSSの最初のものを参照してください：.social .first { color: blue; }

CSSの最後のものを参照してください：.social .last { color: green; }

Jsfiddle：https ://jsfiddle.net/covbtpaq/153/

于 2016-03-23T06:23:21.390 に答える
1

:focus複数のCSSクラスを使用する代わりに、根本的な問題に対処するために、疑似セレクターを使用できます。

input[type="text"] {
   border: 1px solid grey;
   width: 40%;
   height: 30px;
   border-radius: 0;
}
input[type="text"]:focus {
   border: 1px solid #5acdff;
}
于 2016-10-04T01:00:25.017 に答える