如何用HTML和CSS实现文本高亮？新手遇<mark>标签无效问题

先澄清：是HTML标签，不是CSS标签 #

是HTML原生的文本高亮标签，自带默认黄色背景样式。你用它没效果，主要有两个常见原因：标签闭合错误，或者CSS样式覆盖了默认效果。

修复标签无效的步骤 #

1. 修正HTML标签闭合
   你提供的代码里<mark>标签没正确闭合，应该用</mark>结尾，正确写法：

Trying out <mark>highlighted text</mark> now!

2. 重置的CSS样式（如果被覆盖）
   如果还是没效果，大概率是全局CSS重置或者自定义样式把<mark>的默认背景去掉了。可以手动给<mark>指定样式：

mark {
  background-color: #ffeb3b; /* 黄色高亮，可替换成你想要的颜色 */
  color: inherit; /* 继承父元素的文本颜色，也可自定义 */
}

纯CSS实现文本高亮的替代方案 #

如果不想用<mark>标签，也可以通过自定义CSS类实现更灵活的高亮效果：

1. 定义CSS类：

.highlight {
  background-color: #ffd700; /* 自定义高亮色 */
  padding: 2px 4px; /* 增加内边距，让高亮区域更舒展 */
  border-radius: 3px; /* 可选，添加圆角让样式更柔和 */
}

2. 在HTML中应用：

Trying out <span class="highlight">highlighted text</span> now!

内容的提问来源于stack exchange，提问作者AmazedCoder