css3 セレクター: 読み取り/書き込みおよび:読み取り専用とは何ですか?使い方？

この記事では、css3 セレクター: 読み取り/書き込みおよび読み取り専用について説明します。その使い方、CSS3 の :read-write セレクターと :read-only セレクターが何なのか、何をするのか、そしてどのように使用するのかをみんなに知ってもらいましょう。困っている友人は参考にしていただければ幸いです。

css3 :read-write

:read-write は CSS の疑似クラス セレクターであり、ユーザーが編集可能な要素、つまり読み取り可能な要素と一致するために使用されます。および書き込み可能な要素。

編集可能なカテゴリに属する​​要素 には、次のものが含まれます:

1. 読み取り専用ではなく、無効になっていない 要素。これは、readonly 属性もdisabled 属性も設定されていないことを意味します。

2. 読み取り専用でも無効でもない 要素。 <p></p>3. <input> または <textarea> ではないが、contenteditable 属性が設定されているその他の要素。 <p></p>注: 現在、ほとんどのブラウザでは、:read-write セレクターは input 要素と textarea 要素を設定するためにのみ使用できます。 <p></p> <p>css3 :read-only<strong></strong></p>:read-only は CSS の疑似クラス セレクターでもあり、:read-write selector 要素に一致しないものと一致します。 。 <p></p>言い換えると、:read-only pseudo-class セレクターは、ユーザーが編集できない要素と一致します。つまり、<p>↑<span style="color: rgb(255, 0, 0);"> より上で編集できない要素と一致します。例: readonly またはdisabled セットなどの属性を持つ要素。 </span></p>以下は、読み取り-書き込みを使用して照合できる要素の例です: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">< input type = “text” > < input type = “number” > < textarea name = “nm” id = “id” cols = “30” rows = “10” > </ textarea > < div class = “random” contenteditable > </ div ></pre><div class="contentsignin">ログイン後にコピー</div></div></p>次は、読み取り-書き込みを使用して照合できない要素の例です。 read-only :<p><br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">< input type = “text” disabled > < input type = “number” disabled > < input type = “number” readonly > < textarea name = “nm” id = “id” cols = “30” rows = “10” readonly > </ textarea > < div class = “random” > </ div > <！ - 无法使用contenteditable编辑的常规元素 - ></pre><div class="contentsignin">ログイン後にコピー</div></div></p>これは仕様で推奨されている動作ですが、ブラウザの動作はさまざまであるようです。1 つのブラウザで読み取りおよび書き込みとみなされるものは考慮されます。読み取り専用であり、別のブラウザで書き込みが行われるため、適用する :read-write スタイルは一部のブラウザでは機能しない可能性があります。 <p></p>他の疑似クラス セレクターと同様、:read-write セレクターと :read-only セレクターの両方を、:hover や疑似要素 ::after などの他のセレクターとリンクできます。 <p></p>たとえば、:read-write :focus は、編集可能なテキスト領域のスタイルを提供します。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">textarea:read-write:focus { box-shadow: 0 0 2px 1px rgba(0,0,0,0.2); } textarea:read-write:before { content: "Type here..."; color: #aaa; }</pre><div class="contentsignin">ログイン後にコピー</div></div></p>たとえば、 :read-only :hover は、div (通常の) のスタイルを提供します。 ) ページ上: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">div:read-only:hover { background-color: #eee; } div:read-only:before { content: "?"; color: deepPink; }</pre><div class="contentsignin">ログイン後にコピー</div></div></p> <p><strong>ブラウザ サポート<span style="font-size: 16px;"></span></strong></p> <p>表内の数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。 。 <img src="https://img.php.cn//upload/image/788/186/271/1543025190917158.jpg" title="1543025190917158.jpg" alt="css3 セレクター: 読み取り/書き込みおよび:読み取り専用とは何ですか?使い方？"></p>Firefox ブラウザでは、プレフィックス -moz-read-write、-moz-read-only を使用します。読み取り/書き込みセレクターと読み取り専用セレクターは、Internet Explorer および Android の使用ではサポートされていません。 <p></p>要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。推奨される関連ビデオ チュートリアル: <p>CSS3 チュートリアル <a href="http://www.php.cn/course/list/14.html" target="_blank">! </a></p>

以上がcss3 セレクター: 読み取り/書き込みおよび:読み取り専用とは何ですか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。