英文:
css selector: exclude input/textarea elements
问题
我尝试在页面上简单禁用文本选择，除了输入字段，如<input>或<textarea>
*,
::selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
}
我想要使用:not()选择器，因为编写每个输入元素的规则似乎有点巧妙，显式排除似乎是更好的方法。
所以我尝试了以下内容：
*:not(input):not(textarea),
::selection::not(input):not(textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
}
问题是，上面的CSS并不起作用。您可以选择任何您想要的内容。
如何在第一个代码段中排除输入/文本区域元素的CSS选择器？
编辑：
我刚刚发现，当我移除伪选择器::selection时，:not()选择器起作用：
* :not(input):not(textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
}
保持打开，也许有人有更好的解决方案/可以添加一些解释。
英文:
I try to simple disable text selecting on the page, except input fields like <input> or <textarea>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
*,
::selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
}
<!-- language: lang-html -->
<input type="text" value="text" />
<input type="number" value="69420" />
<textarea>
foo bar
</textarea>
Foo bar text on the site
<!-- end snippet -->
I wanted to use the :not() selector since, writing every rule for every input element seems a bit hacky, and a explicit exclusion seems a better approach.
So i tried the following:
*:not(input):not(textarea),
::selection::not(input):not(textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
}
The problem is, the css above does simple not work. You can select whatever you want.
How can i exclude input/textarea elements from the css selector in the first snippet?
EDIT:<br />
I just discoverd, when i remove the pseudo selector ::selection, the :not() selector works:
* :not(input):not(textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
}
Keep it open, perhaps some one has a better solution / can add some explanation.
答案1
得分: 1
::selection 应该位于选择器的末尾：
*:not(input):not(textarea),
:not(input):not(textarea)::selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
}
英文:
::selection should be at the end of the selector:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
*:not(input):not(textarea),
:not(input):not(textarea)::selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
}
<!-- language: lang-html -->
<input type="text" value="text" />
<input type="number" value="69420" />
<textarea>
foo bar
</textarea>
Foo bar text on the site
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论