0

CSS 内の ID の疑似セレクターでの作業を少し支援していただければ幸いです。ID の最初の行を小文字で表示できないようです。私の CSS と対応する HTML の両方のスニペットが参照用に含まれています。

#introtext {
     margin: 0px 0px 20px 0px;
     background: transparent;
     font-face: "arial black";
     font-size: 22px;
     font-weight: bold;
     letter-spacing: .1em;
     line-height: 1;
     text-align: center;
     }

#introtext:first-line {
     font-variant: small-caps;
     }

HTML:

 <div id="introtext"><span id="introcap">H</span><span id="introtext.first">ere you will       
 find links to Scouting related websites and forms.</div>
4

1 に答える 1

1

多分...

...あなたの期待は間違っています (そして、あなたのコードにエラーがあることはわかっています)。コードが期待どおりに機能しているというコメントには同意しますが、別のことを試みているのではないかと推測しています。

最初の文は小文字でよろしいですか?

あなたのコードに の「開始」タグがあることに気付きましたが<span id="introtext.first">、その の終了タグを付けられませんでした</span>。これはエラーです。ただし、最初の文全体を にすることを意図している場合でも、疑似要素は最初の文ではなく最初の行(コンテナの幅によって異なる) を参照small-capsするため、コードは機能しません。:first-line

さらに

はクラスの指定に使用されるため.、id には使用しないことをお勧めします。.とにかくクラスが本当に欲しいものかもしれません。

最後に、解決策は?

あなたの目標に関する私の推測が正しければ、このFIDDLEで示され#introtextているように、次のことを行うことをお勧めします ( css は同じままで、html と:first-lineコードを変更します) 。

HTML

 <div id="introtext">
   <span id="introcap">H</span><span class="first-sentence">ere you will find  
   links to Scouting related websites and forms.</span> More text to follow 
   in a second sentence. And a third. Blah. Blah.
 </div>

CSS

.first-sentence {
     font-variant: small-caps;
     }

それでも

（テキストが中央に配置されているため）これをヘッダーにすることを意図しているように見えるため、おそらくこのようなものはよりセマンティックであり、先頭の「H」を分離する必要もありません（古いブラウザーのサポートが必要な場合を除く） . これがそのデモFIDDLEです。

HTML

<div>
  <h2 id="introtext">Here you will find links to Scouting related websites 
  and forms.</h2> More text to follow in a second sentence. And a third. 
  Blah. Blah.
</div>

CSS

#introtext {
     margin: 0px 0px 20px 0px;
     background: transparent;
     font-face: "arial black";
     font-size: 22px;
     font-weight: bold;
     letter-spacing: .1em;
     line-height: 1;
     text-align: center;
     font-variant: small-caps; /*<-- moved this to here*/
     }

#introtext::first-letter { 
     font-variant: none; /*<-- reset the pseudo-element to normal */
     }
于 2013-07-28T11:30:59.863 に答える