纯CSS select弄乱的标签文本

在纯CSS中，直接操作HTML标签的文本内容是不可能的，因为CSS主要用于描述文档的表现形式，而不是内容。但是，你可以通过一些技巧来实现类似的效果，比如使用伪元素和背景图片来模拟选择的效果。

以下是一个简单的例子，展示了如何使用CSS伪元素和背景图片来模拟选择的效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select Example</title>
<style>
  .selected {
    position: relative;
    display: inline-block;
  }

  .selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="20" height="20" fill="%23f0f0f0"/><rect x="5" y="5" width="10" height="10" fill="%23000000"/></svg>');
    background-size: contain;
    opacity: 0.5;
  }
</style>
</head>
<body>
<div class="selected">
  <span>Selected Text</span>
</div>
</body>
</html>

在这个例子中，.selected 类用于包裹需要模拟选择的文本。.selected::before 伪元素用于创建一个覆盖在文本上的背景图片，该图片模拟了一个选择框的效果。你可以根据需要调整背景图片和伪元素的样式。