4

コンテンツの最初の段落に大きなドロップ キャップ文字を作成するようにページを設定しました。これは期待どおりに機能しますが、影響を受ける要素の前に指定されたクラスを持つ別の div があると、ドロップ キャップが消えます。

例を参照してください...
正しい表示: http://jsfiddle.net/KPqgQ/
間違った表示: http://jsfiddle.net/d73u9/

私のページには次のコードがあります。

<section id="review">
  <div class="content_right"></div>
  <div class="content_left">
    <p>text</p>
    <p>text</p>
  </div>
  <div class="content_left">
    <p>text</p>
    <p>text</p>
  </div>
</section>

次の CSS を使用します。

   #review .content_left:first-of-type p:first-of-type{
        padding-top:10px;
    }

    #review .content_left:first-of-type p:first-of-type:first-letter{
        float: left;
        line-height:90%;
        padding-right: 15px;
        padding-bottom: 10px;

        font-family: "Georgia",_serif;
        font-weight: bold;
        font-size: 60px;
        color:black;
    }

ドロップキャップの大きな最初の文字を作成します。

このコードは、「content_right」div を削除すると機能しますが、そこにあると CSS が機能しません。宣言に関しては正しい順序だと思っていましたが、何かが欠けているに違いありません。

これが意図したとおりに機能しない理由を誰かが知っていますか?

4

2 に答える 2

6

：first-of-typeセレクターは、特定のタイプの要素（section、div、spanなど）の最初のものを実際に選択し、クラスのタイプの最初のものを実際には選択しないため、これは意図したとおりに機能します。

代替案

'〜'修正

チルダ' 'の回避策はここに~記載されています。

/* Targets all paragraphs */
p 
{
        display: block;
        clear: both;
}

/* Targets all paragraphs within divs in #review */
#review div p
{ 
        padding-top:10px;
}

/* Targets the first letter within each paragraph */
#review div p:first-letter{
        float: left;
        line-height:90%;
        padding-right: 15px;
        padding-bottom: 10px;
        font-family: "Georgia",_serif;
        font-weight: bold;
        font-size: 60px;
        color:black;
}    

/* Removes the padding from all except the first paragraphs */
#review > div ~ div > p ~ p, 
#review > .content_left ~ .content_left p:first-of-type 
{
        padding-top: 0px;  
}

/* Removes the first letter stylings of the non-first paragraphs within 
   .content_left classes */
#review > .content_left ~ .content_left p:first-of-type:first-letter, 
#review > div ~ div > p ~ p:first-letter 
{
        float: none;
        line-height:90%;
        padding-right: 0px;
        padding-bottom: 0px;
        font-family: "Georgia",_serif;
        font-weight: normal;
        font-size: 12px; 
}

'〜'メソッドを使用した例

（これと一緒に私を助けてくれたBoltClockに感謝します、そしてそれは結局のところ彼の方法です。）

divの順序を切り替える

divを.content_leftセクションの後ろに移動し.content_rightます。これらはフロートであり、同じレイアウトを維持できるためです。

コード：

<section id="review">
    <div class="content_left">
        <p>text</p>
        <p>text</p>
     </div>
     <div class="content_left">
        <p>text</p>
        <p>text</p>
     </div>
     <div class="content_right"></div>
</section>​

順序の切り替えの例：

：nth-​​of-typeセレクターの使用

セレクターを使用し:nth-of-typeて適切なdivを選択します。

コード：

#review .content_left:nth-of-type(2) :first-child
{
    padding-top:10px;
}

#review .content_left:nth-of-type(2) :first-child:first-letter
{
    float: left;
    line-height:90%;
    padding-right: 15px;
    padding-bottom: 10px;
    font-family: "Georgia",_serif;
    font-weight: bold;
    font-size: 60px;
    color:black;
}

：nth-​​of-typeを使用した例

于 2012-12-28T20:39:29.670 に答える
2

これが私の~回避策です。Rion Williams が親切にも彼の回答から回避策の説明にリンクしてくれたので、私はチップを入れると思いました(これは、コードが期待どおりに機能しない理由を説明するのにも役立ちます):

/* The first p in all .content-left elements */
#review .content_left p:first-of-type {
    padding-top: 10px;
}

/* 
 * Undo the above style for the first p in subsequent .content-left elements.
 */
#review .content_left ~ .content_left p:first-of-type {
    padding-top: 0px;
}

/* The first letter in the first p in all .content-left elements */
#review .content_left p:first-of-type:first-letter {
    float: left;
    line-height: 90%;
    padding-right: 15px;
    padding-bottom: 10px;
    font-family: "Georgia", _serif;
    font-weight: bold;
    font-size: 60px;
    color: black;
}

/* 
 * Undo the above styles for the first letter in the first p
 * in subsequent .content-left elements.
 * 
 * I'm just using the initial values for every property here; you'll want to
 * adjust their values as necessary.
 */
#review .content_left ~ .content_left p:first-of-type:first-letter {
    float: none;
    line-height: normal;
    padding-right: 0px;
    padding-bottom: 0px;
    font-family: inherit;
    font-weight: normal;
    font-size: medium;
    color: inherit;
}

jsFiddle プレビュー

レイアウトによっては、他の特定のクラスについてもこれを繰り返す必要がある場合があります。残念ながら、CSS は特定のクラスの最初の要素に一致するセレクターをまだ提供していないため、今のところはルールをオーバーライドする必要があります。

于 2012-12-28T22:36:03.847 に答える