10

この jsfiddle を見てください: http://jsfiddle.net/ZNddz/

.intro:first-letter {
    font-size: 130px;
}
span.letter {
    background-color: red;
    font-size: 30px;
}
p {
    font-size: 80px;
}

最初のルールは、1 つのクラス セレクターと 1 つのpseudo-elementセレクターで構成されます = 11

2 番目のルールは、1 つのクラス セレクター.letterと 1 つのタグ セレクターで構成されますspan= 11

どちらのルールも同じ特異性を持っているため、勝者が最後のスタイルであると考えるのが妥当です。明らかにそうではありません。そこでbackground-color、2 番目のルールにプロパティを追加することにしました。ご覧のとおり、高さは 30px です。

このことから、両方のルールが同じ要素を選択していないと推測します。しかし、この効果について公式に説明したいのはちょっと奇妙です.

4

2 に答える 2

5

このことから、両方のルールが同じ要素を選択していないと推測します。

これは、が の子孫であるのに対し、 が 要素.introに一致するためです。すでに述べたように、セレクターが異なる要素に一致する場合、特異性は関係ありません。ただし、各セレクターは一部の要素に一致するため、両方のルールが適用され、赤い背景が有効になります。pspan.letter.introspan.letter

しかし、この効果について公式に説明したいのはちょっと奇妙です.

仕様には、あなたが持っているものと非常によく似たいくつかの例が含まれています: テキストを含むインラインレベル要素で始まるブロックレベル要素、ブロックレベル要素に適用されるスタイル、ブロックレベルの:first-letter疑似要素要素、およびそのインライン レベルの子。すべての例で、:first-letter疑似要素はフォーマット構造に関して常に最も内側の子孫です。これは、インライン レベルの子要素内にネストされていることを意味します。

最後の例は、疑似要素を含む要素の階層を示していますが、その直前の例には、スタイルシートにオーバーライド規則が含まれており、カスケードに関して何が起こるかを示しています。

次の CSS は、ドロップ キャップの頭文字を約 2 行にします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 1.2 }
   P::first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

この例は、次のようにフォーマットできます。

架空のタグ シーケンスは次のとおりです。

<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN> 
few words of an article in the Economist.
</P>

::first-letterブロック要素の開始タグの直後に ::first-line 疑似要素開始タグが挿入されている間、疑似要素タグはコンテンツ (つまり、最初の文字) に隣接していることに注意してください。

あなたの場合、両方のfont-size宣言が通常どおり適用されますが、内.intro:first-letterにネストされているため、独自の値を使用します。相対値を使用した場合は に基づいて計算され、スタイルをまったく含めない場合はから単純に継承されます。 span.letterfont-sizespan.letterfont-sizespan.letter

:first-letter疑似要素はインライン レベルの要素には適用されないことに注意してください(ただし、インライン ブロックには適用されます)。

CSS では、::first-letter擬似要素はブロック、リスト項目、テーブルセル、テーブルキャプション、インラインブロック要素などのブロックのようなコンテナーに適用されます。

インライン ボックス ( で生成されるものdisplay: inline) は、ブロック コンテナー ボックスではありません。(ブロックコンテナボックスであるインラインレベルボックスの例はインラインブロックです。 )

ブラウザが疑似要素をインラインに適用している場合、仕様に違反しています。ブロック コンテナーとインライン ボックスの両方の子孫にルールがある場合にどうなるかは:first-letterわかりませんが、インラインには適用されないと書かれているため、理想的にはブラウザーはインライン ボックスの子孫を対象とするルールを常に無視する必要があります。どうやら、Chrome はそうではないと考えています。ダニエルドの答えを参照してください。

于 2013-10-01T15:04:15.540 に答える
2

このことから、両方のルールが同じ要素を選択していないと推測します。

正しい。これを推測する必要はありません。インスペクト要素を開くだけです。

次のマークアップがあるとします。

<p class="intro first"><span class="letter">L</span>sometext</p>

次のコードは、タグに:first-letter疑似要素を設定します。<p>

.intro:first-letter {
    font-size: 130px;
}

次のコードはfont-size、span 要素に を設定します。

span.letter {
    background-color: red;
    font-size: 30px;
}

spanのコードは - のコードをオーバーライドしません。これらは異なるプロパティ<p>を対象としているためです。

first-letterスパンに疑似要素を設定した場合、スパンのコードをオーバーライドします<p>

ここに証拠としてのjsFiddleがあります

つまり、ここには特異性の問題がないことがわかります。

于 2013-10-01T14:29:35.063 に答える