如何覆盖子元素上的"-moz-user-select: none;"?



禁用文本选择的question CSS规则显示了如何阻止元素上的文本选择。一旦阻止了选择,那么如何允许对特定子元素进行选择呢?

例如,

<div class="no-select">
    <p>some text that cannot be selected</p>
    <p class="select">some text that can be selected</p>
    <p>some text that cannot be selected</p>
</div>
table.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
td.select {
    -webkit-touch-callout: all !important;
    -webkit-user-select: all !important;
    -khtml-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
    user-select: all !important;
}

上面的.no-select规则是有效的,但是我在.select规则上的尝试却没有。正确的做法是什么?

尝试-moz-user-select: text代替all

作为将来的参考,无论何时关心CSS规则的可能值,请检查像MDN这样的站点。

这是user-select的MDN链接

最新更新