CSS 如何使第一个单词加粗？

Question

我该如何使用CSS选择器加粗句子的第一个单词？这种方法在浏览器兼容性方面是好还是坏？

代码：

  <h2>this is a sentence</h2>

谢谢

- Adam

---

不确定您所指的浏览器兼容性是什么。 - BoltClock

Answer 1

CSS中没有::first-word伪元素；你需要将第一个单词包裹在额外的元素中，然后选择该元素。

- BoltClock

---

我会选择 <span class="firstWord">(第一个单词)</span>。 - Ben Hull

没错，只有第一个字母被选中。但你可以使用 JavaScript 完成这个任务，例如使用 jQuery:$('h2').each(function(){ var $p = $(this); $p.html($p.html().replace(/^(\w+)/, '<strong>$1</strong>')); }); - atma

Answer 2

当前的CSS选择器不允许这样做。

所以我改变了我的方法，将第一行加粗。 HTML

<h2>this<br> is a sentence</h2>

CSS（层叠样式表）

h2::first-line{
   font-weight: bold;
}

- Daniel De León

Answer 3

只需将第一个单词放在强调标签中。

<h1><strong>This</strong> is how you do it simply.</h1>

这里是JS Fiddle。

- Shane Hussain Naqvi

Answer 4

如果PHP是一个选项：

$string = "I've got a wonderful feeling";
$arr = explode(' ',trim($string));
$first = $arr[0];
$all_but = str_replace ("$first ","",$string);

这将给您第一个单词和字符串的余下部分。然后您可以分别为每个单词设置样式。毫无疑问，$all_but 还有更平滑的选项。

- Bob M

Answer 5

使用Span类。

因此，创建一个名为bold的类，并将第一个单词包装在该类中。

.bold {
font-weight:bold;
}

那么

<h2><span class="bold">the</span> brown fox</h2>

- 422

---

像“bold”这样的类名将演示信息嵌入HTML中，这通常不是很好的做法。如果有一天我们决定第一个单词应该使用斜体而不是粗体，将会怎样呢？ - Ben Hull

FFA只是为了解释，可以称为Eric。 - 422

此外，在 HTML 中没有 "西班牙语" 元素。 - rgin

@Beejamin 技巧仍然正确。在<h2>中添加一个带类的<span>，使一个单词具有不同的样式。 - marissajmc

看起来应该没问题，但话说回来，我在高中的西班牙语课上挂了。如果需要的话，我会用 span 来完成这个任务。 - thegaffney

我不同意这是该技术的好示例 - 您选择的类名很重要。“Eric”没有任何意义，并且无法告诉查看标记的人为什么需要该段落。 "Bold"可以告诉开发人员尝试做什么，但无法解释原因。而“firstWord”更好 - 因为它能够说明该元素在标记中扮演的角色。 - Ben Hull

Answer 6

我已经把单词放在了 <b>First</b> 之间。

- Hossam Ghareeb

---

"<b>标签现在已经不太受欢迎了。你应该使用CSS或<strong></strong>标签。" - bren

并不是说它被“回避”，而是在语义强调的地方使用 strong 标签，而 b 标签则纯粹用于排版。 - Forest

有趣的是，这个被踩的解决方案有时可能比使用<strong>更有意义，因为我认为在某些句子中始终加粗第一个单词将是一种排版决策/设计决策，而不是真正意味着这些单词具有真正的语义强调。 - vicenteherrera

MayorMonty、Forest、Vicenteherrera和其他感兴趣的人：有一种简单的方法来解释<b></b>和<strong></strong>之间的区别。只需问“为什么使用<b>标签？”你就会得到答案，即这个标签的内容需要以强烈的方式强调，与文本的其余部分相比。对于<strong>标签，您不必提出这个问题。因此，当这个问题似乎是多余的时候，您就走在了正确的轨道上 ;) - JPA