在网页设计中，通过CSS更改选定文本的颜色能够有效提升用户体验，吸引访问者的注意力。以下将详细介绍几种实用的方法。

首先是使用::selection伪元素。这是CSS中专门用于设置用户选中部分文本样式的伪元素。语法十分简单，只需要在CSS样式表中写下如下代码：

::selection {
    color: red;
    background-color: yellow;
}

上述代码里，color属性设定了选定文本的颜色为红色，background-color属性则将选定文本的背景颜色设为黄色。需要注意的是，不同浏览器对于::selection伪元素的支持略有差异，部分浏览器可能需要添加浏览器前缀，像在Chrome和Safari浏览器中，需要写成::-webkit-selection；在Firefox浏览器中写成::-moz-selection ；在Opera浏览器中写成::-o-selection 。

除了::selection伪元素，还可以利用JavaScript结合CSS类来实现更改选定文本颜色的效果。先在HTML中为需要设置的文本添加一个特定的类名，例如“selected-text”。然后在CSS样式表中定义该类的样式：

.selected-text {
    color: blue;
}

接着，通过JavaScript来动态添加或移除这个类。假设在HTML中有一个按钮，点击按钮时让选定的文本应用这个样式。可以使用如下JavaScript代码：

document.getElementById('button').addEventListener('click', function() {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        const span = document.createElement('span');
        span.classList.add('selected-text');
        const newNode = range.cloneContents();
        span.appendChild(newNode);
        range.insertNode(span);
        selection.removeAllRanges();
        selection.addRange(range);
    }
});

通过这种方式，用户在点击按钮后，选定的文本就会变成蓝色。

通过上述方法，无论是简单的使用CSS伪元素，还是结合JavaScript实现更复杂的交互效果，都能轻松地更改选定文本的颜色，为网页增添独特的视觉效果和交互性。