css - 継承なしの `user-select none`

Question

ネストされた div ボックス、ul および li タグ、ボタンなどを含む Web ページがあります。ユーザーがそれらを選択できるようにすると見栄えがよくないため、これらのコンテナー パーツの選択を無効にしたいと考えています。しかし同時に、その中の個々のキャラクターを選択できるようにしたい. css プロパティを使用しようとしていますuser-select: noneが、これをオブジェクトに設定すると、プロパティは個々の文字まで継承されているようです。この種の継承を防ぎ、コンテナ ボックスの選択を禁止すると同時に、コンテナ ボックス内の個々の文字の選択を許可する方法はありますか?

Answer 1

このスタイルを外側のボックスに追加できます。

#outer {user-select:none}

そして、すべての子から削除します:

#outer * {user-select:all;}

以下は、可能なすべてのユーザー選択値の説明です: https://developer.mozilla.org/en-US/docs/CSS/user-select