3

好的，事情就是这样。我的 <h1> 标题中需要 2 种不同的字体大小。<br> 后面的文字需要比前面的文字大。

<h1>Welcome text from<br>Name</h1>

所以我尝试了

h1 {
  color: #c3c2c2;
  font-size: 35px;
}

h1 br:after {
  font-size: 50px;
}

但这不起作用，有什么想法或建议吗？

4

5 回答 5

7

如果您不想或无法更改标记，则可以使用:first-lineCSS3 中的选择器。像这样的东西：

 <h1>Welcome text from <br/> Name</h1> 

 h1 { 
   color: #c3c2c2; 
   font-size: 50px; 
 } 

 h1:first-line { 
   font-size: 35px; 
 }

根据 Quirksmode的说法，兼容性很好，特别是如果您使用单冒号语法而不是::first-line语法（所有优秀的浏览器都支持它，IE 5.5 及更高版本也支持）。

请参阅jssfile以获取工作演示。

于 2012-08-16T12:29:18.373 回答
2

如果您能够编辑标记，请将“名称”包装在一个跨度中，并使用您的选择器定位该跨度。

于 2012-08-16T12:30:06.930 回答
2

这是一种方法：

HTML：

<h2>Heading<br><span class="name">Name</span></h2>

CSS：

.name {
    font-size:200%;
}

例子：

http://jsfiddle.net/ghWKm/

但是，更常见的做法是将标题保持在一行并将子标题作为新元素（h3例如）放在其下方。

于 2012-08-16T12:32:31.127 回答
1

您可以使用

`<h1>`Welcome text from`<span class="abc">Name</span></h1>

代替

<h1><br>来自名称的欢迎文本</h1>

并赋予 .abc 风格

于 2012-08-16T12:31:19.293 回答
1

为什么不将每一边都包裹在一个跨度中，然后在那里设置不同的尺寸，这也意味着你不需要 br。

<h1>Welcome text from<span class="size2">Name</span></h1>

h1 {
  color: #c3c2c2;
  font-size: 35px;
}

h1 .size2 {
  font-size: 50px;
}
于 2012-08-16T12:31:42.613 回答