在标题<h1> </h1>之后的其他字体大小

Question

好的就是这件事。我的＆lt; h1＆gt;中需要2种不同的字体大小。标题。 ＆lt; br＆gt;之后的文字需要比之前的文本更大。

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

所以我用

尝试了

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

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

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

Answer 1

如果您不想或不能更改标记，可以使用CSS3中的:first-line选择器。像这样：

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

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

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

According to Quirksmode相容性非常好，特别是如果你使用{-1}}语法的单冒号语法（所有优秀的浏览器都支持它，以及5.5及以上的IE）。

查看jssfidle的工作演示。

Answer 2

如果您能够编辑标记，请在一个范围中包装“name”并使用您的选择器定位范围。

Answer 3

这是一种方法：

HTML：

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

CSS：

.name {
    font-size:200%;
}

示例：

http://jsfiddle.net/ghWKm/

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

Answer 4

你可以使用

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

而不是

<h1>来自<br>姓名</h1>

的欢迎文字

并将风格赋予.abc

Answer 5

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

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

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

h1 .size2 {
  font-size: 50px;
}