0

我将不胜感激在 CSS 中使用 Psuedo Selectors 获得 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 中使用 a，因为.用于指定类。无论如何，也许一堂课是您真正想要的。

最后，一个解决方案？

如果我对您的目标的猜测是正确的，那么我建议您执行以下操作（保持您的#introtextcss 相同，但更改 html 和:first-line代码），如本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”分开的需要（除非您想要旧浏览器支持） . 这是它的演示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 回答