css设置页面内容不能被选中

1. 什么是页面内容不能被选中

网页中的文本内容都是可以被鼠标选中、复制的，然而有些情况下，我们不希望网页上的文本内容被选中。这时候，我们需要使用CSS来设置页面内容不能被选中。

1.1 为什么要设置页面内容不能被选中

在网页中，有些文本内容是很难以被表达为纯文本的，比如一些图文混排的文章。此时，我们希望用户只能选择整个文本块，而不是选择其中的文本内容，以保证阅读体验的一致性。

此外，有些网站的内容是被保护起来的，禁止用户复制或者下载，而设置页面内容不能被选中也是实现这一目的的一种方法。

1.2 如何设置页面内容不能被选中

/* CSS代码实现页面内容不能被选中 */

body {
  -webkit-user-select: none;  /* Chrome、Safari、Opera */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* 标准语法 */
}

上述CSS代码使用了user-select属性，它是一个可以控制用户选择文本的属性。将其设置为none，就可以使页面内容不能被选中。

2. 如何兼容不同浏览器

上述CSS代码在不同浏览器下都可以正常工作，但是其中的前缀要区分浏览器。为了使CSS兼容更多的浏览器，我们可以使用CSS前缀自动添加工具，比如Autoprefixer。

Autoprefixer会根据你设置的浏览器目标，自动为CSS代码添加相应的前缀，以保证在目标浏览器中正常工作。

3. 页面链接和按钮等元素如何避免文字被选中

在设置页面内容不能被选中时，有一个需要注意的问题，那就是页面中的链接和按钮等元素。用户在使用这些元素时，需要对其中的文本部分进行选中和点击操作。如果我们设置了这些元素不能被选中，会影响用户的操作体验。

为了避免这种情况，我们可以通过CSS设置元素内的文本能够被选中，但元素外的文本不能被选中。我们可以为元素内的文本添加标签，并为其设置可选中的样式，同时设置标签的user-select属性为none，来防止元素外的文本被选中。

/* CSS代码实现元素内的文本可以被选中，元素外的文本不能被选中 */

a, button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
a span, button span {
  -webkit-user-select: text; /* 可选中 */
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}