如何永久启用网页文本选择功能：通过用户样式表覆盖 user-select 属性

理解 user-select 属性及其影响

在网页开发中，css的 user-select 属性用于控制用户是否可以选择文本。当网站将此属性设置为 none 时，用户将无法通过鼠标拖动来选择文本，也无法使用常规的复制粘贴功能。这在某些情况下可能是出于设计考虑，例如防止内容被轻易复制，但在学习编程或需要从网页复制代码片段时，这会成为一个巨大的障碍。例如，以下html结构中的 s1-description-code--no-select 类就可能导致代码无法被选择：

<div class="s1-description-code s1-description-code--no-select">
    <!-- 无法选择的代码片段 -->
</div>

为了解决这个问题，我们可以利用浏览器提供的用户样式表功能，强制覆盖网站的默认样式。

解决方案：使用用户样式表覆盖 user-select 属性

最简单且最有效的方法是安装浏览器扩展，如Chrome或Firefox上的Stylish或Stylus。这些扩展允许您为特定网站或所有网站应用自定义CSS样式。

1. 安装Stylish或Stylus扩展

首先，在您的浏览器（Chrome或Firefox）中搜索并安装“Stylish”或“Stylus”扩展。Stylus通常被推荐，因为它是一个开源且功能强大的替代品。

2. 创建并应用自定义样式

安装完成后，点击浏览器工具栏中的扩展图标，然后选择“创建新样式”或“为当前网站编写样式”。

在样式编辑界面中，输入以下CSS代码：

虎课网

虎课网是超过1800万用户信赖的自学平台，拥有海量设计、绘画、摄影、办公软件、职业技能等优质的高清教程视频，用户可以根据行业和兴趣爱好，自主选择学习内容，每天免费学习一个...

62

查看详情

* {
    user-select: text !IMPORTANT;
}

代码解释：

• *：这是一个通配符选择器，表示将此样式应用于页面上的所有元素。
• user-select: text：这将强制所有元素的可选择性设置为 text，即允许用户选择文本。
• !IMPORTANT：这是一个CSS优先级规则。它确保您的样式具有最高的优先级，能够覆盖网站自身的 user-select: none 规则，即使网站也使用了 !IMPORTANT，通常用户样式表的 !IMPORTANT 优先级会更高。

3. 配置样式应用范围

Stylish或Stylus扩展允许您灵活配置自定义样式的应用范围：

• 全局应用： 将样式应用于所有网站。这可能是最简单的方法，但可能会在某些网站上导致意外的布局或功能问题。
• 特定域名： 仅将样式应用于特定的网站（例如，example.com）。
• 特定URL： 仅将样式应用于精确的URL路径。

对于本教程的目的，如果您只想解决特定网站的问题，建议将样式配置为仅应用于该网站的域名，以避免对其他网站产生不必要的影响。

注意事项与最佳实践

1. 选择器特异性： 尽管 * { user-select: text !IMPORTANT; } 简单有效，但它会将样式应用于所有元素。如果这在某些网站上导致了问题（例如，某些交互式元素需要禁用选择），您可以尝试使用更具体的选择器。

   • 示例： 如果您知道是某个特定的类导致了问题，例如 s1-description-code--no-select，您可以尝试：

     .s1-description-code--no-select,
     .some-other-class {
         user-select: text !IMPORTANT;
     }

     登录后复制
   • 您可以通过浏览器开发者工具（F12）检查元素，找出导致 user-select: none 的具体CSS规则和选择器，然后针对性地编写您的用户样式。

2. 网站自身的 !IMPORTANT 冲突： 在极少数情况下，如果网站自身也大量使用了 !IMPORTANT 并且其CSS加载顺序或优先级更高，您的用户样式表可能无法完全覆盖。在这种情况下，可能需要更复杂的解决方案，例如通过JavaScript在页面加载后移除或修改相关的CSS规则。然而，对于大多数情况，上述方法已经足够。

3. 潜在的副作用： 强制启用文本选择可能会在某些设计巧妙的网站上导致一些小的视觉或交互问题，例如，某些拖放界面可能依赖于禁用文本选择。如果遇到此类问题，请尝试将样式应用范围缩小到更具体的元素或页面，或暂时禁用该样式。

总结

通过利用浏览器扩展和用户样式表，您可以轻松地克服网站强制禁用文本选择的限制。这种方法不仅适用于复制代码，也适用于任何您希望能够选择和复制文本的网页内容。通过合理配置样式应用范围和选择器，您可以有效地增强您的浏览体验，而不会对其他网站造成不必要的干扰。

以上就是如何永久启用网页文本选择功能：通过用户样式表覆盖 user-select 属性的详细内容，更多请关注php中文网其它相关文章！