css让文字为“答案”就自动加粗
时间：2024-05-07 09:01:45
阅读：229人已围观
要实现文本内容为“答案”时自动加粗，可以使用CSS的属性选择器。以下是一个简单的例子：
<body class=newstext> <p>这是一个需要加粗的答案段落。</p> <p>测试一下这问题，有没有正确的答案</p> </body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto-Bold Text Example</title>
<style>
p[data-content="答案"] {
font-weight: bold;
}
</style>
</head>
<body>
<p data-content="答案">这是一个需要加粗的答案段落。</p>
<p data-content="问题">这是一个普通的问题段落。</p>
</body>
</html>在这个例子中，我们使用了data-content自定义属性来标识需要加粗的文本。然后通过CSS选择器[data-content="答案"]找到所有带有该属性且值为“答案”的<p>元素，并将其文本加粗显示。这种方法不依赖文本内容的具体位置，只要元素包含正确的属性和值，就会被选中并应用样式。
帝国代码
<?php
$string = $navinfor['newstext'];
// 检查是否包含"答案"并替换为加粗样式
if (strpos($string, '答案') !== false) {
$string = str_replace('答案', '<strong>答案</strong>', $string);
}
// 直接输出处理后的文本
echo $string;
?>js代码
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取所有 class 为 "newstext" 的元素
var elements = document.getElementsByClassName('newstext');
// 遍历这些元素
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
// 使用 innerHTML 替换文本中的“答案”
element.innerHTML = element.innerHTML.replace(/答案/g, '<strong>答案</strong>');
}
});
</script>