主页 / 问题 / 1251515
Accepted
yakob
Asked:2022-03-04 19:35:25 +0000 UTC2022-03-04 19:35:25 +0000 UTC

如何在不添加额外标签的情况下仅在 css 文件中设置文本中的单个单词的样式

  • 772

我在段落中放置了文本：

<p class="header">Welcome to wonderful place</p>

我想用不同的背景突出“美妙”这个词。如何在不添加额外标签（例如<span>等）的情况下在 CSS 文件中执行此操作？

html

1 个回答

  1. Best Answer

    例如，要突出显示（风格化、应用单个样式）段落中的单个单词，您需要“手动”用单独的标签将其包装起来span，并在 CSS 中相应地编写所需的样式。这种实现的一个例子：

    .header>span {font-weight:bold; background:pink;}
    <p class="header">Welcome to <span>wonderful</span> place</p>

    另一种方法是使用 JavaScript。这种实现的一个例子：

    (function() {
  var header = document.querySelector('.header');
  var word = 'wonderful',
    regexp = new RegExp(word, 'i');
  if (regexp.exec(header.innerHTML)) {
    var reg = new RegExp(word, 'g');
    header.innerHTML = header.innerHTML.replace(reg, '<span style="font-weight: bold; background:pink;">' + word + '</span>');
  }
}());
    <p class="header">Welcome to wonderful place</p>

    使用脚本，找到所需的单词并为其应用样式。但即使在这里，找到的单词也会被包装在一个单独的标签中。该脚本将为您完成。它不必是一个标签span。您指定的任何标签。但它应该是，为了对单个单词应用个人风格是绝对必要的。

    不幸的是，没有其他选择。

    • 4

相关问题