Question

我很感激与Psuedo Selectors合作，为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>

Answer 1

也许...

...您的期望不正确（我知道您的代码有错误）。虽然我同意这里的评论，你的代码正在按预期工作，但我猜测你正在尝试不同的东西。

你想要小首饰的第一个句子吗？

我在您的代码中注意到您有<span id="introtext.first">的“开放”标记，但您未能为该</span>添加结束标记。这是一个错误。但是，如果您的意图是让整个第一句成为small-caps，那么您的代码仍然无效，因为 :first-line伪元素不会查看第一句，而是第一句 - 行 （根据容器宽度而变化）。

<强>另外

最好不要在ID中使用.，因为.用于指定类。也许一堂课就是你真正想要的。

最后，解决方案？

如果我对您的目标的推测是正确的，那么我建议您执行以下操作（保持#introtext css相同，但更改html和:first-line代码），为demonstrated in this FIDDLE。

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”分开（除非你想要< strong> OLD 浏览器支持）。 Here is its demo 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 */
     }

ID中的伪类选择器

1 个答案:

也许...