css3选择器:read-write和:read-only是什么？如何使用？-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

css3选择器:read-write和:read-only是什么？如何使用？

青灯夜游

Nov 24, 2018 am 10:15 AM

css3 pemilih

本篇文章给大家带来的内容是介绍css3选择器:read-write和:read-only是什么？如何使用，让大家了解css3的:read-write选择器和:read-only选择器是什么，有什么作用，又是如何使用的。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

css3 :read-write

:read-write是CSS中的一个伪类选择器，它用于匹配用户可编辑的元素，即可读和可写的元素。

属于可编辑类别的元素包括：

1、不是只读且未禁用的元素（任何类型）。这意味着它们既没有设置readonly属性，也没有设置disabled属性。

2、既不是只读也不是禁用的元素（类似于input）。</p> <p>3、不是<input>或<textarea>，但具有contenteditable属性集的任何其他元素。</p> <p>注意: 目前, 在大多浏览器中, :read-write 选择器只使用于设置了input 和 textarea 元素。</p> <p><strong>css3 :read-only</strong></p> <p>:read-only同样也是CSS中的一个伪类选择器，匹配任何与:read-write选择器不匹配的元素。</p> <p>换句话说，:read-only伪类选择器匹配的是用户不可编辑的元素，即匹配任何不属于上面<span style="color: rgb(255, 0, 0);">↑</span>可编辑的任何元素。比如：设置了readonly，或disabled等属性的元素。</p> <p>以下是使用:read-write可以匹配的元素示例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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">Salin selepas log masuk</div></div><p>以下是使用:read-write不可以匹配的元素，即使用:read-only可以匹配的元素示例：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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">Salin selepas log masuk</div></div><p>尽管这是规范推荐的行为，但浏览器行为似乎有所不同：可能在一个浏览器中认为读写的内容在另一个浏览器中就会被认为是只读的，因此我们应用的: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:php;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">Salin selepas log masuk</div></div><p>例如，:read-only + :hover将为页面上的div（常规）提供样式：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>div:read-only:hover { background-color: #eee; } div:read-only:before { content: "?"; color: deepPink; }</pre><div class="contentsignin">Salin selepas log masuk</div></div><p><strong><span style="font-size: 16px;">浏览器支持</span></strong></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/788/186/271/1543025190917158.jpg" class="lazy" title="1543025190917158.jpg" alt="2.jpg">表格中的数字表示支持该属性的第一个浏览器版本号。</p> <p>在Firefox浏览器中要使用前缀：-moz-read-write，-moz-read-only；且在Internet Explorer和Android上read-write选择器和read-only选择器无法被支持使用。</p> <p>总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。相关视频教程推荐：<a href="http://www.php.cn/course/list/14.html" target="_blank">CSS3教程</a>！</p><p>Atas ialah kandungan terperinci css3选择器:read-write和:read-only是什么？如何使用？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Kenyataan Laman Web ini</div> <div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat AI Hot</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Gambar buka pakaian secara percuma</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>Penyingkiran pakaian AI</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>Menjana ai hentai secara percuma.</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Artikel Panas</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796780570.html" title="R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 bulan yang lalu</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796780641.html" title="R.E.P.O. Tetapan grafik terbaik" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Tetapan grafik terbaik</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 bulan yang lalu</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796785841.html" title="Assassin's Creed Shadows: Penyelesaian Riddle Seashell" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Penyelesaian Riddle Seashell</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796789525.html" title="Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini" class="phpgenera_Details_mainR4_bottom_title">Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796780618.html" title="Akan R.E.P.O. Ada Crossplay?" class="phpgenera_Details_mainR4_bottom_title">Akan R.E.P.O. Ada Crossplay?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 bulan yang lalu</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat panas</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Editor kod yang mudah digunakan dan percuma</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Cina</h3> </a> <p>Versi Cina, sangat mudah digunakan</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Hantar Studio 13.0.1</h3> </a> <p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Alat pembangunan web visual</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Mac</h3> </a> <p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Topik panas</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7552</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1382</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/steamdzhmcssmgs" title="Apakah format nama akaun stim" class="phpgenera_Details_mainR4_bottom_title">Apakah format nama akaun stim</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>83</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/winactivationkeyper" title="kunci pengaktifan win11 kekal" class="phpgenera_Details_mainR4_bottom_title">kunci pengaktifan win11 kekal</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>58</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/newyorktimesdailybrief" title="Sambungan NYT menunjukkan dan jawapan" class="phpgenera_Details_mainR4_bottom_title">Sambungan NYT menunjukkan dan jawapan</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>22</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>91</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/faq/zt">Tunjukkan Lagi</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/496068.html" title="Bagaimana untuk melaksanakan sempadan renda dalam css3" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/6324593180439447.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana untuk melaksanakan sempadan renda dalam css3" /> </a> <a href="https://www.php.cn/ms/faq/496068.html" title="Bagaimana untuk melaksanakan sempadan renda dalam css3" class="phphistorical_Version2_mids_title">Bagaimana untuk melaksanakan sempadan renda dalam css3</a> <span class="Articlelist_txts_time">Sep 16, 2022 pm 07:11 PM</span> <p class="Articlelist_txts_p">Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/496167.html" title="Apakah pengecam pemilih id dalam css" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202209/22/2022092215382122250.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah pengecam pemilih id dalam css" /> </a> <a href="https://www.php.cn/ms/faq/496167.html" title="Apakah pengecam pemilih id dalam css" class="phphistorical_Version2_mids_title">Apakah pengecam pemilih id dalam css</a> <span class="Articlelist_txts_time">Sep 22, 2022 pm 03:57 PM</span> <p class="Articlelist_txts_p">Dalam CSS, pengecam pemilih id ialah "#". Anda boleh menentukan gaya khusus untuk elemen HTML yang ditandakan dengan nilai atribut id tertentu Struktur sintaks ialah "nilai #ID {attribute: attribute value;}". Atribut ID adalah unik dan tidak boleh diulang dalam keseluruhan halaman; nilai atribut ID tidak seharusnya bermula dengan nombor yang bermula dengan nombor tidak akan berfungsi dalam pelayar Mozilla/Firefox.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/629094.html" title="Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170045044029480.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3" /> </a> <a href="https://www.php.cn/ms/faq/629094.html" title="Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3" class="phphistorical_Version2_mids_title">Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3</a> <span class="Articlelist_txts_time">Nov 20, 2023 am 11:20 AM</span> <p class="Articlelist_txts_p">Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3. Contoh kod khusus adalah seperti berikut: Kod HTML: <divid="container" ><divclass="item"&gt ;Elemen anak pertama</div><divclass="item"&</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/500827.html" title="Apa yang perlu dilakukan jika pemilih javascript gagal" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202302/10/2023021010132241285.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apa yang perlu dilakukan jika pemilih javascript gagal" /> </a> <a href="https://www.php.cn/ms/faq/500827.html" title="Apa yang perlu dilakukan jika pemilih javascript gagal" class="phphistorical_Version2_mids_title">Apa yang perlu dilakukan jika pemilih javascript gagal</a> <span class="Articlelist_txts_time">Feb 10, 2023 am 10:15 AM</span> <p class="Articlelist_txts_p">Pemilih JavaScript gagal kerana kod tidak diseragamkan Penyelesaiannya ialah: 1. Alih keluar kod JS yang diimport dan kaedah pemilih ID akan berkesan 2. Hanya perkenalkan kod JS yang ditentukan sebelum memperkenalkan "jquery.js".</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/496457.html" title="Ketahui ciri CSS baharu: Limpahan keratan berarah:klip" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/63454f463d47c423.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Ketahui ciri CSS baharu: Limpahan keratan berarah:klip" /> </a> <a href="https://www.php.cn/ms/faq/496457.html" title="Ketahui ciri CSS baharu: Limpahan keratan berarah:klip" class="phphistorical_Version2_mids_title">Ketahui ciri CSS baharu: Limpahan keratan berarah:klip</a> <span class="Articlelist_txts_time">Oct 11, 2022 pm 07:12 PM</span> <p class="Articlelist_txts_p">Artikel ini akan memperkenalkan ciri baharu, bermula daripada Chrome 90, ciri baharu yang ditambahkan pada limpahan - limpahan: klip Gunakannya untuk mengawal arah limpahan dengan mudah.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/495587.html" title="Adakah pemilih dalam css termasuk pemilih tag hiperteks?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/631079bcbb711256.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Adakah pemilih dalam css termasuk pemilih tag hiperteks?" /> </a> <a href="https://www.php.cn/ms/faq/495587.html" title="Adakah pemilih dalam css termasuk pemilih tag hiperteks?" class="phphistorical_Version2_mids_title">Adakah pemilih dalam css termasuk pemilih tag hiperteks?</a> <span class="Articlelist_txts_time">Sep 01, 2022 pm 05:25 PM</span> <p class="Articlelist_txts_p">Tidak termasuk. Pemilih CSS termasuk: 1. Pemilih teg, yang mencari elemen HTML tertentu melalui nama elemen halaman HTML 2. Pemilih kelas, yang mencari elemen HTML tertentu melalui nilai atribut kelas elemen HTML; yang Cari elemen HTML tertentu melalui nilai atribut id elemen HTML 4. Pemilih kad bebas "*" boleh merujuk kepada semua jenis elemen teg, termasuk elemen tersuai 5. Pemilih atribut menggunakan nama atribut sedia ada; Elemen HTML atau nilai atribut untuk mencari elemen HTML tertentu.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/604716.html" title="Analisis mendalam tentang adalah dan di mana pemilih: meningkatkan tahap pengaturcaraan CSS" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/169417577128346.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Analisis mendalam tentang adalah dan di mana pemilih: meningkatkan tahap pengaturcaraan CSS" /> </a> <a href="https://www.php.cn/ms/faq/604716.html" title="Analisis mendalam tentang adalah dan di mana pemilih: meningkatkan tahap pengaturcaraan CSS" class="phphistorical_Version2_mids_title">Analisis mendalam tentang adalah dan di mana pemilih: meningkatkan tahap pengaturcaraan CSS</a> <span class="Articlelist_txts_time">Sep 08, 2023 pm 08:22 PM</span> <p class="Articlelist_txts_p">Analisis mendalam tentang adalah dan di mana pemilih: meningkatkan tahap pengaturcaraan CSS Pengenalan: Dalam proses pengaturcaraan CSS, pemilih adalah elemen penting. Mereka membenarkan kami memilih dan menggayakan elemen dalam dokumen HTML berdasarkan kriteria tertentu. Dalam artikel ini, kami akan menyelami dua pemilih yang biasa digunakan iaitu: pemilih dan pemilih tempat. Dengan memahami prinsip kerja dan senario penggunaan mereka, kami boleh meningkatkan tahap pengaturcaraan CSS dengan banyak. 1. ialah pemilih ialah pemilih ialah pilihan yang sangat berkuasa</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/604045.html" title="Dari pemula hingga mahir: Kuasai kemahiran menggunakan adalah dan di mana pemilih" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169413573489834.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Dari pemula hingga mahir: Kuasai kemahiran menggunakan adalah dan di mana pemilih" /> </a> <a href="https://www.php.cn/ms/faq/604045.html" title="Dari pemula hingga mahir: Kuasai kemahiran menggunakan adalah dan di mana pemilih" class="phphistorical_Version2_mids_title">Dari pemula hingga mahir: Kuasai kemahiran menggunakan adalah dan di mana pemilih</a> <span class="Articlelist_txts_time">Sep 08, 2023 am 09:15 AM</span> <p class="Articlelist_txts_p">Dari pemula hingga mahir: Kuasai kemahiran menggunakan adalah dan di mana pemilih Pengenalan: Dalam proses pemprosesan dan analisis data, pemilih adalah alat yang sangat penting. Melalui pemilih, kami boleh mengekstrak data yang diperlukan daripada set data mengikut keadaan tertentu. Artikel ini akan memperkenalkan kemahiran penggunaan ialah dan tempat pemilih untuk membantu pembaca dengan cepat menguasai fungsi berkuasa kedua-dua pemilih ini. 1. Penggunaan pemilih is Pemilih is ialah pemilih asas yang membolehkan kita memilih set data berdasarkan syarat yang diberikan.</p> </div> </div> <a href="https://www.php.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ms/about/us.html">Tentang kita</a> <a href="https://www.php.cn/ms/about/disclaimer.html">Penafian</a> <a href="https://www.php.cn/ms/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1744943190"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>