0

次のコードがあります。

<div class="wrapper">
    <div class="location info">
        <h3>Location</h3>
        <h3>should be no stlye</h3>
    </div>
    <div class="skills info">
        <h3>Skills</h3>
        <h3>should be no stlye</h3>
    </div>
</div>

h3info クラスの後の最初の要素のスタイルを設定しようとしています。私はこれがうまくいくはずだと思ったが、うまくいかない：

.info:first-child {
    color: color: rgb(200,50,50);
}

なぜこれが機能しないのですか？の最初の要素をどのようにスタイルすればよいですか。html に余分なマークアップを追加せずに情報を表示しますか?

4

5 に答える 5

4

You're not far away, try this:

.info > h3:first-child {
    color: rgb(200,50,50);
}

But instead of using something like this, I believe the best approach would be to add a meaningful class to the first h3 - this will make reading the CSS and markup much easier in the future and it will prevent unexpected behavior when editing your markup. For example:

.info-title {
    /* your styles here */
}
于 2013-04-01T17:13:49.183 に答える
4

スペースが必要です:

.info :first-child

疑似要素は、要素のfirst-child子ではなく、要素自体を記述します。したがって、スペースがなければ、親の最初の子である情報のクラスを持つ要素を選択しています。

スペースは、 の子孫を探していることを示します.info。直接の子だけを探しているので、子コンビネータ - を使用し、>おそらく h3 要素のみを指定する必要があります。

.info > h3:first-child

編集：セレクタの問題に気づいただけです。他の回答 ( +1 to user1479606 ) で述べたように、スタイル定義にもタイプミスがあります: color: color: ...should be color: ....

于 2013-04-01T17:14:44.137 に答える
1

CSS が正しくありません。指定する必要があるのはcolor1 回だけです。また、セレクターを少し変更する必要があります。

.info > h3:first-child {
    color: rgb(200,50,50);
}

デモ: http://jsfiddle.net/WSZcS/

于 2013-04-01T17:14:23.577 に答える
0

info クラスの後の最初の h3 要素のスタイルを設定しようとしています。

.info > h3 {
    color: rgb(200,50,50);
}
于 2013-04-01T17:14:53.760 に答える