国产精品欧美一区二区三区,中文字幕+日韩在线视频,欧美性videos高清另类

\n????\n????????\n????????????\n????????????\n????????????\n????????????\n????????????

姓名<\/th>\n????????????	區(qū)域<\/th>\n????????<\/tr>\n????????
梵云飛<\/td>\n????????????	西西域<\/td>\n????????<\/tr>\n????????
歡都落蘭<\/td>\n????????????	南國(guó)<\/td>\n????????<\/tr>\n????????
石寬<\/td>\n????????????	北山<\/td>\n????????<\/tr>\n????????
涂山紅紅<\/td>\n????????????	涂山<\/td>\n????????<\/tr>\n????<\/table>\n<\/body>\n\n<\/html><\/pre>\n 代碼運(yùn)行結(jié)果如下圖所示：<\/p>\n $\"3.png\"$ <\/p>\n `:nth-child(n)<\/code>偽類的n<\/code>參數(shù)用法中比較復(fù)雜的是使用(an+b)<\/code>公式用法，如下示例列舉了一些公式用法：<\/p>\n` \n:nth-child(5n)<\/code>：定位元素的序號(hào)是5<\/strong> [=5×1]、10<\/strong> [=5×2]、15<\/strong> [=5×3]等。<\/p><\/li>\n :nth-child(3n+4)<\/code>：定位元素的序號(hào)是4<\/strong> [=(3×0)+4]、7<\/strong> [=(3×1)+4]、10<\/strong> [=(3×2)+4]、13<\/strong> [=(3×3)+4] 等。<\/p><\/li>\n :nth-child(-n+3)<\/code>：定位元素的序號(hào)是3<\/strong> [=-0+3]、2<\/strong> [=-1+3]、1<\/strong> [=-2+3]。<\/p><\/li>\n<\/ul>\n :nth-child(n)<\/code>偽類與:nth-last-child(n)<\/code>偽類和:nth-of-type(n)<\/code>偽類與:nth-last-of-type(n)<\/code>偽類的區(qū)別，類似于:first-of-type<\/code>偽類與:last-of-type<\/code>偽類和:first-child<\/code>偽類與:last-child<\/code>偽類的區(qū)別。<\/p>\n :empty<\/strong><\/p>\n :empty<\/code>偽類是用來定位沒有任何子級(jí)元素或文本內(nèi)容的元素，其中文本內(nèi)容包含了空白。但是HTML的注釋是不影響:empty<\/code>偽類定位元素的。<\/p>\n 如下示例代碼展示了:empty<\/code>偽類的用法：<\/p>\n \n\n\n\n????\n????\n????\n????empty偽類<\/title>\n????<style>\n????????body?{\n????????????\/?開啟flex布局?\/\n????????????display:?flex;\n????????}\n\n????????.box?{\n????????????background:?pink;\n????????????height:?80px;\n????????????width:?80px;\n????????????margin:?0?20px;\n????????}\n\n????????.box:empty?{\n????????????background:?lime;\n????????}\n????<\/style>\n<\/head>\n\n<body> <h1><a href="http://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</a></h1>\n????<div><\/div>\n????<div>這個(gè)元素的背景是粉色的<\/div>\n????<div>\n????????<!-- 這是一個(gè)注釋 -->\n????<\/div>\n<\/body>\n\n<\/html><\/pre>\n<p>代碼運(yùn)行結(jié)果如下圖所示：<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/image\/419\/249\/675\/1659497061553278.png\" title=\"1659497061553278.png\" alt=\"4.png\"><\/p>\n<p><strong>:root<\/strong><\/p>\n<p>CSS中的<code>:root<\/code>偽類選擇器比較簡(jiǎn)單，它代表的就是<code><html><\/code>元素。<\/p>\n<p>如下代碼展示的<code>:root<\/code>偽類的用法：<\/p>\n<pre>:root?{\n????height:?100vh;\n????width:?100vw;\n????background-color:?dodgerblue;\n}<\/pre>\n<p>代碼運(yùn)行結(jié)果如下圖所示：<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/image\/304\/257\/317\/1659497072493009.png\" title=\"1659497072493009.png\" alt=\"5.png\"><\/p>\n<p><strong><span style=\"font-size: 18px;\">3、UI元素狀態(tài)偽類選擇器<\/span><\/strong><br><\/p>\n<p>使用UI偽類選擇器可以根據(jù)元素的狀態(tài)匹配元素，下方列表將簡(jiǎn)單總結(jié)這類選擇器：<\/p>\n<table>\n<thead><tr class=\"firstRow\">\n<th>選擇器<\/th>\n<th>說明<\/th>\n<\/tr><\/thead>\n<tbody>\n<tr>\n<td>：enabled<\/td>\n<td>選擇啟用狀態(tài)的元素<\/td>\n<\/tr>\n<tr>\n<td>：disabled<\/td>\n<td>選擇禁用狀態(tài)的元素<\/td>\n<\/tr>\n<tr>\n<td>：checked<\/td>\n<td>選擇被選中的input元素（只用于單選按鈕和復(fù)選框）<\/td>\n<\/tr>\n<tr>\n<td>：default<\/td>\n<td>選擇默認(rèn)元素<\/td>\n<\/tr>\n<tr>\n<td>：valid<\/td>\n<td>根據(jù)輸入驗(yàn)證選擇有效或者無效的input元素<\/td>\n<\/tr>\n<tr>\n<td>：in-range\/：out-of-range<\/td>\n<td>選擇在制定范圍之內(nèi)或者職位受限的input元素<\/td>\n<\/tr>\n<tr>\n<td>：required\/：optional<\/td>\n<td>根據(jù)是否允許：required屬性選擇input元素<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong><span style=\"font-size: 18px;\">4、輸入偽類選擇器<\/span><\/strong><\/p>\n<p>關(guān)于表單輸入的偽類，主要介紹三種常用的，具體如下：<\/p>\n<ul>\n<li><p><code>:enabled<\/code>和<code>:disabled<\/code><\/p><\/li>\n<li><p><code>:read-only<\/code>和<code>:read-write<\/code><\/p><\/li>\n<li><p><code>:checked<\/code><\/p><\/li>\n<\/ul>\n<p><strong>:enabled和:disabled<\/strong><\/p>\n<p><code>:enabled<\/code>和<code>:disabled<\/code>一這組偽類選擇器分別表示禁用狀態(tài)與可用狀態(tài)，這組為了使完全對(duì)立的。<\/p>\n<p><code>:enabled<\/code>偽類的實(shí)際用處并不大，因?yàn)榇蠖嘣啬J(rèn)都是可用的，所以寫不寫意義并不大。<\/p>\n<p>如下代碼展示了<code>:enabled<\/code>和<code>:disabled<\/code>的用法：<\/p>\n<pre><!DOCTYPE html>\n<html>\n\n<head>\n??<meta charset=\"UTF-8\">\n??<meta http-equiv=\"X-UA-Compatible\"\n content=\"IE=edge\">\n??<meta name=\"viewport\"\n content=\"width=device-width, initial-scale=1.0\">\n??<title>:enabled和:disabled的用法<\/title>\n??<style>\n????input:enabled?{\n??????outline:?none;\n????}\n\n????input:disabled?{\n??????\/?禁用狀態(tài)背景為灰色?\/\n??????background-color:?gray;\n????}\n??<\/style>\n<\/head>\n\n<body>\n??<input type=\"text\"\n placeholder=\"可用狀態(tài)\">\n??<input type=\"text\"\n disabled\n placeholder=\"禁用狀態(tài)\">\n<\/body>\n\n<\/html><\/pre>\n<p>代碼運(yùn)行結(jié)果如下所示：<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/image\/187\/204\/421\/1659496376884282.png\" title=\"1659496376884282.png\" alt=\"1.png\"><\/p>\n<p>由上圖我們看到禁用狀態(tài)的<code><input><\/code>的背景顏色為灰色。<\/p>\n<p><strong>:read-only和:read-write<\/strong><\/p>\n<p><code>:read-only<\/code>和<code>:read-write<\/code>一這組偽類選擇器分別表示只讀和可寫狀態(tài)，同樣的<code>:read-write<\/code>也很雞肋，因?yàn)槟J(rèn)就是可讀寫，示例代碼如下所示：<\/p>\n<pre><!DOCTYPE html>\n<html>\n\n<head>\n??<meta charset=\"UTF-8\">\n??<meta http-equiv=\"X-UA-Compatible\"\n content=\"IE=edge\">\n??<meta name=\"viewport\"\n content=\"width=device-width, initial-scale=1.0\">\n??<title>:read-only和:read-write<\/title>\n??<style>\n????input:read-write?{\n??????outline:?none;\n????}\n\n????\/?只讀狀態(tài)?\/\n????input:read-only?{\n??????color:?red;\n??????outline:?none;\n????}\n??<\/style>\n<\/head>\n\n<body>\n??<input type=\"text\"\n value=\"讀寫狀態(tài)\">\n??<input type=\"text\"\n readonly\n value=\"只讀狀態(tài)\">\n<\/body>\n\n<\/html><\/pre>\n<p>代碼運(yùn)行結(jié)果如下所示：<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/image\/479\/654\/921\/1659496410914864.png\" title=\"1659496410914864.png\" alt=\"2.png\"><\/p>\n<p>我們可以看到，只讀的<code><input><\/code>的文字顏色為紅色。<\/p>\n<p><strong>:checked<\/strong><\/p>\n<p><code>:checked<\/code>偽類可以說是眾多偽類選擇器中使用頻率很高的一個(gè)偽類選擇器，該選擇器表示選中的狀態(tài)，就比如下面這個(gè)例子：<\/p>\n<pre><!DOCTYPE html>\n<html>\n\n<head>\n??<meta charset=\"UTF-8\">\n??<meta http-equiv=\"X-UA-Compatible\"\n content=\"IE=edge\">\n??<meta name=\"viewport\"\n content=\"width=device-width, initial-scale=1.0\">\n??<title>checked偽類<\/title>\n??<style>\n????input:checked?{\n??????\/?為選中的增加陰影?\/\n??????box-shadow:?2px?2px?2px?2px?lightcoral;\n????}\n??<\/style>\n<\/head>\n\n<body>\n??<input type=\"checkbox\">\n??<input type=\"checkbox\"\n checked>\n<\/body>\n\n<\/html><\/pre>\n<p><img src=\"https:\/\/img.php.cn\/upload\/image\/978\/506\/260\/1659496446725425.png\" title=\"1659496446725425.png\" alt=\"3.png\"><\/p>\n<p>關(guān)于<code>:checked<\/code>偽類，最佳實(shí)踐是配合<code><label><\/code>元素來實(shí)現(xiàn)，現(xiàn)在我們就通過<code>:checked<\/code>和<code><label><\/code>元素來實(shí)現(xiàn)一個(gè)開關(guān)的效果。<\/p>\n<p>示例代碼如下：<\/p>\n<pre><!DOCTYPE html>\n<html>\n\n<head>\n??<meta charset=\"UTF-8\">\n??<meta http-equiv=\"X-UA-Compatible\"\n content=\"IE=edge\">\n??<meta name=\"viewport\"\n content=\"width=device-width, initial-scale=1.0\">\n??<title>開關(guān)<\/title>\n??<style>\n????[type=\"checkbox\"]?{\n??????width:?44px;\n??????height:?26px;\n??????position:?absolute;\n??????opacity:?0;\n??????pointer-events:?none;\n????}\n\n????\/?開關(guān)樣式?\/\n????.cs-switch?{\n??????display:?inline-block;\n??????width:?44px;\n??????height:?26px;\n??????border:?2px?solid;\n??????border-radius:?26px;\n??????background-color:?currentColor;\n??????box-sizing:?border-box;\n??????color:?silver;\n??????transition:?all?.2s;\n??????cursor:?pointer;\n????}\n\n????.cs-switch::before?{\n??????content:?\"\";\n??????display:?block;\n??????width:?22px;\n??????height:?22px;\n??????border-radius:?50%;\n??????background-color:?#fff;\n??????transition:?margin-left?.2s;\n????}\n\n\n????:checked+.cs-switch?{\n??????color:?blueviolet;\n????}\n\n????\/?選中移動(dòng)?\/\n????:checked+.cs-switch::before?{\n??????margin-left:?18px;\n????}\n\n????\/?禁用狀態(tài)?\/\n????:disabled+.cs-switch?{\n??????opacity:?.4;\n??????cursor:?not-allowed;\n????}\n??<\/style>\n<\/head>\n\n<body>\n??<!-- 普通狀態(tài) -->\n??<input type=\"checkbox\"\n id=\"switch\">\n??<label\n for=\"switch\"><\/label>\n??<!-- 選中狀態(tài) -->\n??<input type=\"checkbox\"\n id=\"switch1\"\n checked>\n??<label\n for=\"switch1\"><\/label>\n??<!-- 禁用狀態(tài) -->\n??<input type=\"checkbox\"\n id=\"switch2\"\n disabled>\n??<label\n for=\"switch2\"><\/label>\n??<!-- 選中禁用狀態(tài) -->\n??<input type=\"checkbox\"\n id=\"switch3\"\n checked\n disabled>\n??<label\n for=\"switch3\"><\/label>\n<\/body>\n\n<\/html><\/pre>\n<p>運(yùn)行效果如下所示：<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/image\/757\/983\/883\/1659496460999320.png\" title=\"1659496460999320.png\" alt=\"4.png\"><\/p>\n<p><strong><span style=\"font-size: 18px;\">5、邏輯組合偽類<\/span><\/strong><\/p>\n<p><strong><code>:not()<\/code>否定的偽類<\/strong><\/p>\n<ul style=\"list-style-type: disc;\">\n<li><p>優(yōu)先級(jí)為0，優(yōu)先級(jí)由括號(hào)中的表達(dá)式?jīng)Q定； <code>:not(p)<\/code>由p決定<\/p><\/li>\n<li><p>可以不斷的級(jí)聯(lián)；<br><code>input:not(:disabled):not(:read-only) {}<\/code> ;表示處于不禁用，也不處于只讀的狀態(tài)<\/p><\/li>\n<li><p>不可出現(xiàn)多個(gè)表達(dá)式，也不支持選擇符；<br><code>li:not(li, od)<\/code>; 尚未支持<\/p><\/li>\n<\/ul>\n<p>:not()的巨大的用處在于告別重置的問題；<\/p>\n<p>重置web中的樣式，就好比我們?cè)陧?xiàng)目中經(jīng)常使用到的：添加<code>.active<\/code>類名來控制樣式的顯示與隱藏\/改變樣式，往常的寫法都是：<\/p>\n<pre>.cs_li?{\n\tdisplay:?none;\n}\n.cs_li.active?{\n\tdisplay:?block;\n}<\/pre>\n<p>而我們可以使用<code>:not()<\/code>偽類，可以更好的實(shí)現(xiàn)：<\/p>\n<pre>.cs_li:not(.active)?{\n\tdisplay:?none;\n}<\/pre>\n<p>在列表中的設(shè)置<code><li><\/code>的邊框時(shí)也可使用其<code>:not()<\/code><\/p>\n<pre>.cs_li:not(:nth-of-type(5n)){\n\tmargin-right:?10px;?\/\/?除5的倍數(shù)項(xiàng)都設(shè)置右邊的外邊距\n}<\/pre>\n<p><strong><code>:is()<\/code>的作用是簡(jiǎn)化選擇器<\/strong><\/p>\n<p>平時(shí)我們開發(fā)中經(jīng)常會(huì)用到類似下面的語法：<\/p>\n<pre>.cs_li_a?>?img,\n.cs_li_b?>?img,\n.cs_li_c?>?img?{\n\tdisplay:?none;\n}<\/pre>\n<p>使用<code>:is()<\/code>簡(jiǎn)化可寫成：<\/p>\n<pre>:is(.cs_li_a,?.cs_li_b,?.cs_li_c)?>?img?{\n\tdisplay:?none;\n}<\/pre>\n<p>還有一種嵌套之間的關(guān)系，相互嵌套，交叉組合得出結(jié)論；如下方所示<\/p>\n<pre>ol?ol?li,\nol?ul?li,?\nul?ul?li,\nul?ol?li?{\n\tmargin-left:?20px;\n}<\/pre>\n<p>使用<code>:is()<\/code>偽類強(qiáng)化，則只需要幾行代碼：<\/p>\n<pre>:is(ol,?ul)?:is(ol,?ul)?li{\n\tmargin-left:?20px;\n}<\/pre>\n<p><code><strong>:where()<\/strong><\/code><\/p>\n<p><code>:where()<\/code>與上方的:is()相同，唯一不同的是級(jí)別永遠(yuǎn)為0，也不受括號(hào)里面的表達(dá)式影響；<\/p>\n<p>使用的方法與:is()完全相同，但優(yōu)先級(jí)永遠(yuǎn)是0；底下的括號(hào)中的優(yōu)先級(jí)完全被忽略，倆句是同一個(gè)優(yōu)先級(jí)，并且級(jí)別等同于<code>.conten<\/code>選擇器<\/p>\n<pre>:where(.article,?section)?.conten?{}\n:where(#article,?#section)?.conten?{<\/pre>\n<p>（學(xué)習(xí)視頻分享：<a href=\"https:\/\/ipnx.cn\/course\/list\/1.html\" target=\"_blank\" textvalue=\"web前端入門\">web前端入門<\/a>）<\/p>"} </script> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <script>var V_PATH="/";window.onerror=function(){ return true; };</script> </head> <body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2"> <link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css"> <header> <div id="wjcelcm34c" class="head"> <div id="wjcelcm34c" class="haed_left"> <div id="wjcelcm34c" class="haed_logo"> <a href="http://ipnx.cn/zh/" title="" class="haed_logo_a"> <img src="/static/imghw/logo.png" alt="" class="haed_logoimg"> </a> </div> <div id="wjcelcm34c" class="head_nav"> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a> <div class="wjcelcm34c" id="dropdown-template1" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a> <a href="http://ipnx.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a> <a href="http://ipnx.cn/zh/wenda.html" title="問答" class="languagechoosea">問答</a> </div> </div> </div> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a> <div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a> <a href="http://ipnx.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a> </div> </div> </div> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a> <div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a> <a href="http://ipnx.cn/zh/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a> <a href="http://ipnx.cn/zh/toolset/php-libraries" title="PHP 庫" class="languagechoosea">PHP 庫</a> <a href="http://ipnx.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a> <a href="http://ipnx.cn/zh/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a> <a href="http://ipnx.cn/zh/toolset/extension-plug-ins" title="擴(kuò)展插件" class="languagechoosea on">擴(kuò)展插件</a> </div> </div> </div> <div id="wjcelcm34c" class="head_navs"> <a href="http://ipnx.cn/zh/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a> </div> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="休閑" class="head_nava head_nava-template1_3">休閑</a> <div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a> <a href="http://ipnx.cn/zh/mobile-game-tutorial/" title="游戲教程" class="languagechoosea">游戲教程</a> </div> </div> </div> </div> </div> <div id="wjcelcm34c" class="head_search"> <input id="key_words" onkeydown="if (event.keyCode == 13) searchs('zh')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="搜索" onclick="searchs('zh')"><img src="/static/imghw/find.png" alt="搜索"></a> </div> <div id="wjcelcm34c" class="head_right"> <div id="wjcelcm34c" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">簡(jiǎn)體中文<i class="layui-icon layui-icon-triangle-d"></i></a> <div class="wjcelcm34c" id="dropdown-template" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="javascript:;" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a> <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a> <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a> <a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a> <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a> <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a> <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a> <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a> </div> </div> </div> <span id="wjcelcm34c" class="head_right_line"></span> <div style="display: block;" id="login" class="haed_login "> <a href="javascript:;" title="Login" class="haed_logina ">Login</a> </div> <div style="display: block;" id="reg" class="head_signup login"> <a href="javascript:;" title="singup" class="head_signupa">singup</a> </div> </div> </div> </header> <main> <div id="wjcelcm34c" class="Article_Details_main"> <div id="wjcelcm34c" class="Article_Details_main1"> <div id="wjcelcm34c" class="Article_Details_main1L"> <div id="wjcelcm34c" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain"> <div id="wjcelcm34c" class="Article_Details_main1L1">目錄</div> <div id="wjcelcm34c" class="Article_Details_main1L2" id="Article_Details_main1L2"> <!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"--> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#strong-偽類選擇器-strong" title="<strong>偽類選擇器</strong>" ><strong>偽類選擇器</strong></a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#strong-link-和-visited-選擇器-strong" title="<strong>：link 和：visited 選擇器</strong>" ><strong>：link 和：visited 選擇器</strong></a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#strong-hover-選擇器-strong" title="<strong>：hover 選擇器</strong>" ><strong>：hover 選擇器</strong></a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#strong-active-選擇器-strong" title="<strong>：active 選擇器</strong>" ><strong>：active 選擇器</strong></a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#strong-focus-選擇器-strong" title="<strong>：focus 選擇器</strong>" ><strong>：focus 選擇器</strong></a> </div> </div> </div> </div> <div id="wjcelcm34c" class="Article_Details_main1M"> <div id="wjcelcm34c" class="phpgenera_Details_mainL1"> <a href="http://ipnx.cn/zh/" title="首頁" class="phpgenera_Details_mainL1a">首頁</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://ipnx.cn/zh/web-designer.html" class="phpgenera_Details_mainL1a">web前端</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://ipnx.cn/zh/css-tutorial.html" class="phpgenera_Details_mainL1a">css教程</a> <img src="/static/imghw/top_right.png" alt="" /> <span>css偽選擇器學(xué)習(xí)之偽類選擇器解析</span> </div> <div id="wjcelcm34c" class="Articlelist_txts"> <div id="wjcelcm34c" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">css偽選擇器學(xué)習(xí)之偽類選擇器解析</h1> <div id="wjcelcm34c" class="Articlelist_txts_info_head"> <div id="wjcelcm34c" class="author_info"> <a href="http://ipnx.cn/zh/member/287557.html" class="author_avatar"> <img class="lazy" data-src="https://img.php.cn/upload/avatar/000/287/557/5bef70171e9f3249.jpg" src="/static/imghw/default1.png" alt="青燈夜游"> </a> <div id="wjcelcm34c" class="author_detail"> <a href="http://ipnx.cn/zh/member/287557.html" class="author_name">青燈夜游</a> </div> </div> </div> <span id="wjcelcm34c" class="Articlelist_txts_time">Aug 03, 2022 am 11:26 AM</span> <div id="wjcelcm34c" class="Articlelist_txts_infos"> <span id="wjcelcm34c" class="Articlelist_txts_infoss on">css</span> <span id="wjcelcm34c" class="Articlelist_txts_infoss ">偽元素</span> <span id="wjcelcm34c" class="Articlelist_txts_infoss ">選擇器</span> <span id="wjcelcm34c" class="Articlelist_txts_infoss ">偽類</span> </div> </div> </div> <hr /> <div id="wjcelcm34c" class="article_main php-article"> <div id="wjcelcm34c" class="article-list-left detail-content-wrap content"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3461856641"> </ins> <p>在之前的文章《<a href="http://ipnx.cn/css-tutorial-494597.html" target="_blank">css偽選擇器學(xué)習(xí)之偽元素選擇器解析</a>》中，我們學(xué)習(xí)了偽元素選擇器，而今天我們?cè)敿?xì)了解一下偽類選擇器，希望對(duì)大家有所幫助！</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/62e9e24bc9146635.jpg" class="lazy" alt="css偽選擇器學(xué)習(xí)之偽類選擇器解析" ></p> <h2 id="strong-偽類選擇器-strong"><strong>偽類選擇器</strong></h2> <p><strong>偽類選擇器</strong> 是一種允許通過未包含在HTML元素的狀態(tài)信息來定位HTML元素的用法。<strong>偽類選擇器</strong> 的具體用法就是向已有的選擇器增加關(guān)鍵字，表示定位的HTML元素的狀態(tài)信息?！就扑]學(xué)習(xí)：<a href="http://ipnx.cn/course/list/12.html" target="_blank">css視頻教程</a>】</p> <p>通過偽類，開發(fā)者可以設(shè)置元素的動(dòng)態(tài)狀態(tài)，例如懸停（hover）、點(diǎn)擊（active）以及文檔中不能通過其它選擇器選擇的元素（這些元素沒有 ID 或 class 屬性），例如第一個(gè)子元素（first-child）或者最后一個(gè)子元素（last-child）。</p> <p>例如<code>:hover</code>偽類選擇器可以用來在用戶將鼠標(biāo)懸停在按鈕上時(shí)改變按鈕的顏色。如下示例代碼所示：</p> <pre class="brush:php;toolbar:false">/?所有用戶指針懸停的按鈕?/?? ?button:hover?{?? ??color:?blue;?? ?}</pre> <p>偽類的名稱不區(qū)分大小寫，但需要以冒號(hào)<code>:</code>開頭。另外，偽類需要與 CSS 中的選擇器結(jié)合使用，語法格式如下：</p> <pre class="brush:php;toolbar:false">選擇器:偽類?{?? ??屬性?:?屬性值;?? ?}</pre> <p><strong>偽類選擇器</strong> 的具體語法格式為 <code>:偽類</code>，這里一定不要忘記 <code>:</code>。</p> <p>CSS 中提供了各種各樣的偽類，如下表所示：</p> <table><tbody> <tr class="firstRow"> <th>選擇器</th> <th>例子</th> <th>例子描述</th> </tr> <tr> <td>:active</td> <td>a:active</td> <td>匹配被點(diǎn)擊的鏈接</td> </tr> <tr> <td>:checked</td> <td>input:checked</td> <td>匹配處于選中狀態(tài)的 <input> 元素</td> </tr> <tr> <td>:disabled</td> <td>input:disabled</td> <td>匹配每個(gè)被禁用的 <input> 元素</td> </tr> <tr> <td>:empty</td> <td>p:empty</td> <td>匹配任何沒有子元素的 <p> 元素</td> </tr> <tr> <td>:enabled</td> <td>input:enabled</td> <td>匹配每個(gè)已啟用的 <input> 元素</td> </tr> <tr> <td>:first-child</td> <td>p:first-child</td> <td>匹配父元素中的第一個(gè)子元素 <p>，<p> 必須是父元素中的第一個(gè)子元素</td> </tr> <tr> <td>:first-of-type</td> <td>p:first-of-type</td> <td>匹配父元素中的第一個(gè) <p> 元素</td> </tr> <tr> <td>:focus</td> <td>input:focus</td> <td>匹配獲得焦點(diǎn)的 <input> 元素</td> </tr> <tr> <td>:hover</td> <td>a:hover</td> <td>匹配鼠標(biāo)懸停其上的元素</td> </tr> <tr> <td>:in-range</td> <td>input:in-range</td> <td>匹配具有指定取值范圍的 <input> 元素</td> </tr> <tr> <td>:invalid</td> <td>input:invalid</td> <td>匹配所有具有無效值的 <input> 元素</td> </tr> <tr> <td>:lang(language)</td> <td>p:lang(it)</td> <td>匹配每個(gè) lang 屬性值以 "it" 開頭的 <p> 元素</td> </tr> <tr> <td>:last-child</td> <td>p:last-child</td> <td>匹配父元素中的最后一個(gè)子元素 <p>， <p> 必須是父元素中的最后一個(gè)子元素</td> </tr> <tr> <td>:last-of-type</td> <td>p:last-of-type</td> <td>匹配父元素中的最后一個(gè) <p> 元素</td> </tr> <tr> <td>:link</td> <td>a:link</td> <td>匹配所有未被訪問的鏈接</td> </tr> <tr> <td>:not(selector)</td> <td>:not(p)</td> <td>匹配每個(gè)非 <p> 元素的元素</td> </tr> <tr> <td>:nth-child(n)</td> <td>p:nth-child(2)</td> <td>匹配父元素中的第二個(gè)子元素 <p></td> </tr> <tr> <td>:nth-last-child(n)</td> <td>p:nth-last-child(2)</td> <td>匹配父元素的倒數(shù)第二個(gè)子元素 <p></td> </tr> <tr> <td>:nth-last-of-type(n)</td> <td>p:nth-last-of-type(2)</td> <td>匹配父元素的倒數(shù)第二個(gè)子元素 <p></td> </tr> <tr> <td>:nth-of-type(n)</td> <td>p:nth-of-type(2)</td> <td>匹配父元素的第二個(gè)子元素 <p></td> </tr> <tr> <td>:only-of-type</td> <td>p:only-of-type</td> <td>匹配父元素中唯一的 <p> 元素</td> </tr> <tr> <td>:only-child</td> <td>p:only-child</td> <td>匹配父元素中唯一的子元素 <p></td> </tr> <tr> <td>:optional</td> <td>input:optional</td> <td>匹配不帶 "required" 屬性的 <input> 元素</td> </tr> <tr> <td>:out-of-range</td> <td>input:out-of-range</td> <td>匹配值在指定范圍之外的 <input> 元素</td> </tr> <tr> <td>:read-only</td> <td>input:read-only</td> <td>匹配指定了 "readonly" 屬性的 <input> 元素</td> </tr> <tr> <td>:read-write</td> <td>input:read-write</td> <td>匹配不帶 "readonly" 屬性的 <input> 元素</td> </tr> <tr> <td>:required</td> <td>input:required</td> <td>匹配指定了 "required" 屬性的 <input> 元素</td> </tr> <tr> <td>:root</td> <td>root</td> <td>匹配元素的根元素，在 HTML 中，根元素永遠(yuǎn)是 HTML</td> </tr> <tr> <td>:target</td> <td>#news:target</td> <td>匹配當(dāng)前活動(dòng)的 #news 元素（單擊包含該錨名稱的 URL）</td> </tr> <tr> <td>:valid</td> <td>input:valid</td> <td>匹配所有具有有效值的 <input> 元素</td> </tr> <tr> <td>:visited</td> <td>a:visited</td> <td>匹配所有已經(jīng)訪問過的鏈接</td> </tr> </tbody></table> <p><strong><span style="font-size: 18px;">偽類選擇器的分類</span></strong></p> <p>CSS 版本從第一版本發(fā)展到第三版本，提供的<strong>偽類選擇器</strong> 的數(shù)量已經(jīng)很龐大了。尤其CSS3版本新增了大量的<strong>偽類選擇器</strong> 。</p> <p><strong>偽類選擇器</strong> 的數(shù)量這么多，為了更好地梳理<strong>偽類選擇器</strong> ，我們可以按照用途的不同分為如下 5 種類型：</p> <ul> <li><p>用戶行為偽類：指與用戶行為相關(guān)的一些偽類，例如，懸停<code>:hover</code>、按下<code>:active</code>以及獲取焦點(diǎn)<code>:focus</code>等。</p></li> <li><p>URL定位偽類：用于定位HTML頁面中的元素</p></li> <li><p>輸入偽類：與表單控件相關(guān)的偽類</p></li> <li><p>結(jié)構(gòu)偽類：主要用于定位目標(biāo)元素</p></li> <li><p>邏輯組合偽類：用于邏輯操作的，例如<code>:not()</code>，就表示不是某元素。</p></li> </ul> <p><strong><span style="font-size: 18px;">1、用戶行為偽類--動(dòng)態(tài)偽類選擇器</span></strong></p> <p>之所以稱為動(dòng)態(tài)偽類選擇器，是因?yàn)樗鼈兏鶕?jù)條件的改變匹配元素，是相對(duì)于文檔的固定狀態(tài)來說的。隨著JavaScript廣泛用于修改文檔內(nèi)容和元素狀態(tài)，動(dòng)態(tài)選擇器和靜態(tài)選擇器之間的界限越來越模糊，不過，動(dòng)態(tài)偽類選擇器仍然是一類比較特別的選擇器。</p> <h4 id="strong-link-和-visited-選擇器-strong"><strong>：link 和：visited 選擇器</strong></h4> <p>：link選擇器匹配超鏈接，：visited選擇器匹配用戶已經(jīng)訪問過得超鏈接。</p> <p>使用：visited選擇器可以應(yīng)用到鏈接元素的屬性不多。你可以改變顏色和字體，不過僅此而已。</p> <blockquote><p>提示：：visited選擇器匹配用戶在所有頁面訪問過的href屬性為URL的任意鏈接，而不只是你的頁面。：visited最常見的用法就是針對(duì)已訪問的鏈接應(yīng)用某種樣式，從而讓它們跟未訪問的鏈接有所區(qū)別。比如我們看新聞，看過的新聞和沒有看過的新聞在首頁列表呈現(xiàn)的狀態(tài)是不一樣的，便于我們區(qū)分。</p></blockquote> <h4 id="strong-hover-選擇器-strong"><strong>：hover 選擇器</strong></h4> <p>：hover選擇器匹配用戶鼠標(biāo)懸停在其上的任意元素。</p> <h4 id="strong-active-選擇器-strong"><strong>：active 選擇器</strong></h4> <p>：active選擇器匹配當(dāng)前被用戶激活的元素（一般情況下為鼠標(biāo)點(diǎn)擊該元素）。</p> <h4 id="strong-focus-選擇器-strong"><strong>：focus 選擇器</strong></h4> <p>：focus選擇器匹配獲得焦點(diǎn)的元素，常用于 input 元素。</p> <p><strong><span style="font-size: 18px;">2、結(jié)構(gòu)性偽類選擇器</span></strong></p> <p>使用結(jié)構(gòu)性偽類選擇器能夠根據(jù)元素在文檔中的位置選擇元素。這類選擇器都有一個(gè)冒號(hào)字符前綴（：），例如：empty。他們可以單獨(dú)使用，也可以跟其他選擇器組合使用，如p：empty。</p> <p><span style="color: rgb(20, 25, 30);">結(jié)構(gòu)偽類選擇器類選擇器包含的內(nèi)容如下表所示：</span><br></p> <table> <thead><tr class="firstRow"> <th>偽類選擇器</th> <th>作用</th> </tr></thead> <tbody> <tr> <td><code>selector:first-child</code></td> <td>用來定位一組兄弟元素中的第一個(gè)元素</td> </tr> <tr> <td><code>selector:last-child</code></td> <td>用來定位一組兄弟元素中的最后一個(gè)元素</td> </tr> <tr> <td><code>selector:nth-child(n)</code></td> <td>用來定位一組兄弟元素中的第n個(gè)元素</td> </tr> <tr> <td><code>selector:nth-last-child(n)</code></td> <td>用來定位一組兄弟元素中倒序方式的第n個(gè)元素</td> </tr> <tr> <td><code>selector:first-of-type</code></td> <td>用來定位一組同類型的兄弟元素中的第一個(gè)元素</td> </tr> <tr> <td><code>selector:last-of-type</code></td> <td>用來定位一組同類型的兄弟元素中的最后一個(gè)元素</td> </tr> <tr> <td><code>selector:nth-of-type(n)</code></td> <td>用來定位一組同類型的兄弟元素中的第n個(gè)元素</td> </tr> <tr> <td><code>selector:nth-last-of-type(n)</code></td> <td>用來定位一組同類型的兄弟元素中倒序方式的第n個(gè)元素</td> </tr> <tr> <td><code>selector:only-child</code></td> <td>用來定位一個(gè)沒有任何兄弟元素的元素</td> </tr> <tr> <td><code>selector:only-of-type</code></td> <td>用來定位一個(gè)沒有任何同類型兄弟元素的元素</td> </tr> <tr> <td><code>selector:empty</code></td> <td>用來定位一個(gè)沒有子級(jí)元素的元素，并且該元素也沒有任何文本內(nèi)容</td> </tr> <tr> <td><code>selector:root</code></td> <td>用來定位 HTML 頁面中的根元素（<code><html></code>）</td> </tr> </tbody> </table> <p>CSS中的結(jié)構(gòu)偽類選擇器是根據(jù)HTML頁面中元素之間的關(guān)系來定位HTML元素，從而減少對(duì)HTML元素的<code>id</code>屬性和<code>class</code>屬性的依賴。</p> <p><strong>:first-child與:last-child</strong></p> <p><code>:first-child</code>偽類用來定義一組兄弟元素的第一個(gè)元素而<code>:last-child</code>偽類則是定位一組兄弟元素的最后一個(gè)元素。</p> <p>如下示例代碼展示了<code>:first-child</code>偽類和<code>:last-child</code>偽類的用法：</p> <p>HTML結(jié)構(gòu)如下：</p> <pre class="brush:php;toolbar:false"><ul> ????<li>涂山紅紅</li> ????<li>涂山蘇蘇</li> ????<li>涂山蓉蓉</li> ????<li>涂山雅雅</li> </ul></pre> <p>CSS代碼如下：</p> <pre class="brush:php;toolbar:false">li:first-child?{ ????color:?red; } li:last-child?{ ????color:?blue; }</pre> <p>代碼運(yùn)行結(jié)果如下圖所示：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/427/445/317/1659497003562831.png" class="lazy" title="1659497003562831.png" alt="1.png"></p> <p><code>:first-child</code> 偽類可以使用<code>:nth-child(n)</code>偽類改寫為<code>:nth-child(1)</code>，而<code>:last-child</code>偽類可以使用<code>:nth-last-child(n)</code>偽類改寫為<code>:nth-last-child(1)</code>。</p> <p><code>:first-child</code>偽類和<code>:last-child</code>偽類經(jīng)常會(huì)引起誤解。例如 <code>li:first-child</code> 是用來定位所有<code><li></code>元素中第一個(gè)作為子級(jí)元素的，而不是定位<code><li></code>元素的第一個(gè)子級(jí)元素。</p> <p><strong>:first-of-type與:last-of-type</strong></p> <p><code>:first-of-type</code>偽類和<code>:last-of-type</code>偽類一個(gè)用于定位一組元素中的第一個(gè)兄弟元素，一個(gè)用來定位最后一個(gè)。</p> <p>如下示例代碼展示了<code>:first-of-type</code>偽類和<code>:last-of-type</code>偽類的用法：</p> <p>HTML結(jié)構(gòu)如下：</p> <pre class="brush:php;toolbar:false"><h3>狐妖小紅娘</h3> <p>涂山紅紅</p> <p>涂山蘇蘇</li></pre> <p>CSS代碼如下：</p> <pre class="brush:php;toolbar:false">p:first-of-type?{ ????color:?red; } p:last-of-type?{ ????color:?blue; }</pre> <p>代碼運(yùn)行結(jié)果如下圖所示：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/108/183/164/1659497018208857.png" class="lazy" title="1659497018208857.png" alt="2.png"></p> <p><code>:first-of-type</code>偽類與<code>:last-of-type</code>偽類的用法一定要和<code>:first-child</code>偽類與<code>:last-child</code>偽類的用法區(qū)分開。以<code>:first-of-type</code>偽類和<code>:first-child</code>偽類為例來說明：</p> <ul> <li><p><code>:first-of-type</code>偽類是定位一組同類型的兄弟元素中的第一個(gè)元素，不管這個(gè)元素在兄弟元素中的位置如何。</p></li> <li><p><code>:first-child</code>偽類是定位一組兄弟元素中的第一個(gè)元素，這些兄弟元素不一定是同類型的。</p></li> </ul> <p>如果將上述示例代碼中的<code>:first-of-type</code>偽類改寫為<code>:first-child</code>偽類的話，將不會(huì)生效。</p> <p><strong>:nth-child(n)與:nth-last-child(n)</strong></p> <p><code>:nth-child(n)</code>偽類和<code>:nth-last-child(n)</code>偽類都是CSS3中新增的選擇器，這兩個(gè)選擇器的用法基本上是一致的。區(qū)別在于<code>:nth-last-child(n)</code>偽類是倒序方式定位元素，也就是說，<code>:nth-last-child(n)</code>偽類是從一組元素的結(jié)尾開始的。</p> <p>接下來，主要以<code>:nth-child(n)</code>偽類為例進(jìn)行講解。<code>:nth-child(n)</code>偽類中的<code>n</code>參數(shù)的含義具有3種情況：</p> <ul> <li><p>數(shù)字值：任意一個(gè)大于 0 的正整數(shù)。例如 <code>#example td:nth-child(1)</code> 表示定位ID為<code>example</code>的父元素下所有<code><td></code>元素中的第一個(gè)元素。</p></li> <li><p>關(guān)鍵字：<code>odd</code>表示奇數(shù)，等同于<code>:nth-child(2n)</code>；<code>even</code>表示偶數(shù)，等同于<code>:nth-child(2n+1)</code>。</p></li> <li><p>格式為<code>(an+b)</code>公式：<code>a</code>表示周期的長(zhǎng)度（<em>步長(zhǎng)</em> ），<code>n</code>表示計(jì)數(shù)器（<em>從 0 開始</em> ），而<code>b</code>則表示偏移值。</p></li> </ul> <p>如下示例代碼展示了<code>:nth-child(n)</code>偽類(實(shí)現(xiàn)表格隔行換色效果)的用法：</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> ????<meta charset="UTF-8"> ????<meta http-equiv="X-UA-Compatible" content="IE=edge"> ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> ????<title>nth-child偽類</title> ????<style> ????????table?{ ????????????border-collapse:?collapse; ????????????border-spacing:?0; ????????????width:?100%; ????????} ????????th, ????????td?{ ????????????border-top:?1px?solid?lightcoral; ????????????text-align:?center; ????????} ????????/?最后一行單元格在底部增加一個(gè)邊框效果?/ ????????tr:last-child?td?{ ????????????border-bottom:?1px?solid?lightcoral; ????????} ????????/?實(shí)現(xiàn)隔行換色?/ ????????tr:nth-child(even)?{ ????????????background-color:?aquamarine; ????????} ????</style> </head> <body> ????<table> ????????<tr> ????????????<th>姓名</th> ????????????<th>區(qū)域</th> ????????</tr> ????????<tr> ????????????<td>梵云飛</td> ????????????<td>西西域</td> ????????</tr> ????????<tr> ????????????<td>歡都落蘭</td> ????????????<td>南國(guó)</td> ????????</tr> ????????<tr> ????????????<td>石寬</td> ????????????<td>北山</td> ????????</tr> ????????<tr> ????????????<td>涂山紅紅</td> ????????????<td>涂山</td> ????????</tr> ????</table> </body> </html></pre> <p>代碼運(yùn)行結(jié)果如下圖所示：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/854/466/743/1659497044995214.png" class="lazy" title="1659497044995214.png" alt="3.png"></p> <p><code>:nth-child(n)</code>偽類的<code>n</code>參數(shù)用法中比較復(fù)雜的是使用<code>(an+b)</code>公式用法，如下示例列舉了一些公式用法：</p> <ul> <li><p><code>:nth-child(5n)</code>：定位元素的序號(hào)是<strong>5</strong> [=5×1]、<strong>10</strong> [=5×2]、<strong>15</strong> [=5×3]等。</p></li> <li><p><code>:nth-child(3n+4)</code>：定位元素的序號(hào)是<strong>4</strong> [=(3×0)+4]、<strong>7</strong> [=(3×1)+4]、<strong>10</strong> [=(3×2)+4]、<strong>13</strong> [=(3×3)+4] 等。</p></li> <li><p><code>:nth-child(-n+3)</code>：定位元素的序號(hào)是<strong>3</strong> [=-0+3]、<strong>2</strong> [=-1+3]、<strong>1</strong> [=-2+3]。</p></li> </ul> <p><code>:nth-child(n)</code>偽類與<code>:nth-last-child(n)</code>偽類和<code>:nth-of-type(n)</code>偽類與<code>:nth-last-of-type(n)</code>偽類的區(qū)別，類似于<code>:first-of-type</code>偽類與<code>:last-of-type</code>偽類和<code>:first-child</code>偽類與<code>:last-child</code>偽類的區(qū)別。</p> <p><strong>:empty</strong></p> <p><code>:empty</code>偽類是用來定位沒有任何子級(jí)元素或文本內(nèi)容的元素，其中文本內(nèi)容包含了空白。但是HTML的注釋是不影響<code>:empty</code>偽類定位元素的。</p> <p>如下示例代碼展示了<code>:empty</code>偽類的用法：</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> ????<meta charset="UTF-8"> ????<meta http-equiv="X-UA-Compatible" content="IE=edge"> ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> ????<title>empty偽類</title> ????<style> ????????body?{ ????????????/?開啟flex布局?/ ????????????display:?flex; ????????} ????????.box?{ ????????????background:?pink; ????????????height:?80px; ????????????width:?80px; ????????????margin:?0?20px; ????????} ????????.box:empty?{ ????????????background:?lime; ????????} ????</style> </head> <body> ????<div></div> ????<div>這個(gè)元素的背景是粉色的</div> ????<div> ????????<!-- 這是一個(gè)注釋 --> ????</div> </body> </html></pre> <p>代碼運(yùn)行結(jié)果如下圖所示：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/419/249/675/1659497061553278.png" class="lazy" title="1659497061553278.png" alt="4.png"></p> <p><strong>:root</strong></p> <p>CSS中的<code>:root</code>偽類選擇器比較簡(jiǎn)單，它代表的就是<code><html></code>元素。</p> <p>如下代碼展示的<code>:root</code>偽類的用法：</p> <pre class="brush:php;toolbar:false">:root?{ ????height:?100vh; ????width:?100vw; ????background-color:?dodgerblue; }</pre> <p>代碼運(yùn)行結(jié)果如下圖所示：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/304/257/317/1659497072493009.png" class="lazy" title="1659497072493009.png" alt="5.png"></p> <p><strong><span style="font-size: 18px;">3、UI元素狀態(tài)偽類選擇器</span></strong><br></p> <p>使用UI偽類選擇器可以根據(jù)元素的狀態(tài)匹配元素，下方列表將簡(jiǎn)單總結(jié)這類選擇器：</p> <table> <thead><tr class="firstRow"> <th>選擇器</th> <th>說明</th> </tr></thead> <tbody> <tr> <td>：enabled</td> <td>選擇啟用狀態(tài)的元素</td> </tr> <tr> <td>：disabled</td> <td>選擇禁用狀態(tài)的元素</td> </tr> <tr> <td>：checked</td> <td>選擇被選中的input元素（只用于單選按鈕和復(fù)選框）</td> </tr> <tr> <td>：default</td> <td>選擇默認(rèn)元素</td> </tr> <tr> <td>：valid</td> <td>根據(jù)輸入驗(yàn)證選擇有效或者無效的input元素</td> </tr> <tr> <td>：in-range/：out-of-range</td> <td>選擇在制定范圍之內(nèi)或者職位受限的input元素</td> </tr> <tr> <td>：required/：optional</td> <td>根據(jù)是否允許：required屬性選擇input元素</td> </tr> </tbody> </table> <p><strong><span style="font-size: 18px;">4、輸入偽類選擇器</span></strong></p> <p>關(guān)于表單輸入的偽類，主要介紹三種常用的，具體如下：</p> <ul> <li><p><code>:enabled</code>和<code>:disabled</code></p></li> <li><p><code>:read-only</code>和<code>:read-write</code></p></li> <li><p><code>:checked</code></p></li> </ul> <p><strong>:enabled和:disabled</strong></p> <p><code>:enabled</code>和<code>:disabled</code>一這組偽類選擇器分別表示禁用狀態(tài)與可用狀態(tài)，這組為了使完全對(duì)立的。</p> <p><code>:enabled</code>偽類的實(shí)際用處并不大，因?yàn)榇蠖嘣啬J(rèn)都是可用的，所以寫不寫意義并不大。</p> <p>如下代碼展示了<code>:enabled</code>和<code>:disabled</code>的用法：</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> ??<meta charset="UTF-8"> ??<meta http-equiv="X-UA-Compatible" content="IE=edge"> ??<meta name="viewport" content="width=device-width, initial-scale=1.0"> ??<title>:enabled和:disabled的用法</title> ??<style> ????input:enabled?{ ??????outline:?none; ????} ????input:disabled?{ ??????/?禁用狀態(tài)背景為灰色?/ ??????background-color:?gray; ????} ??</style> </head> <body> ??<input type="text" placeholder="可用狀態(tài)"> ??<input type="text" disabled placeholder="禁用狀態(tài)"> </body> </html></pre> <p>代碼運(yùn)行結(jié)果如下所示：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/187/204/421/1659496376884282.png" class="lazy" title="1659496376884282.png" alt="1.png"></p> <p>由上圖我們看到禁用狀態(tài)的<code><input></code>的背景顏色為灰色。</p> <p><strong>:read-only和:read-write</strong></p> <p><code>:read-only</code>和<code>:read-write</code>一這組偽類選擇器分別表示只讀和可寫狀態(tài)，同樣的<code>:read-write</code>也很雞肋，因?yàn)槟J(rèn)就是可讀寫，示例代碼如下所示：</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> ??<meta charset="UTF-8"> ??<meta http-equiv="X-UA-Compatible" content="IE=edge"> ??<meta name="viewport" content="width=device-width, initial-scale=1.0"> ??<title>:read-only和:read-write</title> ??<style> ????input:read-write?{ ??????outline:?none; ????} ????/?只讀狀態(tài)?/ ????input:read-only?{ ??????color:?red; ??????outline:?none; ????} ??</style> </head> <body> ??<input type="text" value="讀寫狀態(tài)"> ??<input type="text" readonly value="只讀狀態(tài)"> </body> </html></pre> <p>代碼運(yùn)行結(jié)果如下所示：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/479/654/921/1659496410914864.png" class="lazy" title="1659496410914864.png" alt="2.png"></p> <p>我們可以看到，只讀的<code><input></code>的文字顏色為紅色。</p> <p><strong>:checked</strong></p> <p><code>:checked</code>偽類可以說是眾多偽類選擇器中使用頻率很高的一個(gè)偽類選擇器，該選擇器表示選中的狀態(tài)，就比如下面這個(gè)例子：</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> ??<meta charset="UTF-8"> ??<meta http-equiv="X-UA-Compatible" content="IE=edge"> ??<meta name="viewport" content="width=device-width, initial-scale=1.0"> ??<title>checked偽類</title> ??<style> ????input:checked?{ ??????/?為選中的增加陰影?/ ??????box-shadow:?2px?2px?2px?2px?lightcoral; ????} ??</style> </head> <body> ??<input type="checkbox"> ??<input type="checkbox" checked> </body> </html></pre> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/978/506/260/1659496446725425.png" class="lazy" title="1659496446725425.png" alt="3.png"></p> <p>關(guān)于<code>:checked</code>偽類，最佳實(shí)踐是配合<code><label></code>元素來實(shí)現(xiàn)，現(xiàn)在我們就通過<code>:checked</code>和<code><label></code>元素來實(shí)現(xiàn)一個(gè)開關(guān)的效果。</p> <p>示例代碼如下：</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> ??<meta charset="UTF-8"> ??<meta http-equiv="X-UA-Compatible" content="IE=edge"> ??<meta name="viewport" content="width=device-width, initial-scale=1.0"> ??<title>開關(guān)</title> ??<style> ????[type="checkbox"]?{ ??????width:?44px; ??????height:?26px; ??????position:?absolute; ??????opacity:?0; ??????pointer-events:?none; ????} ????/?開關(guān)樣式?/ ????.cs-switch?{ ??????display:?inline-block; ??????width:?44px; ??????height:?26px; ??????border:?2px?solid; ??????border-radius:?26px; ??????background-color:?currentColor; ??????box-sizing:?border-box; ??????color:?silver; ??????transition:?all?.2s; ??????cursor:?pointer; ????} ????.cs-switch::before?{ ??????content:?""; ??????display:?block; ??????width:?22px; ??????height:?22px; ??????border-radius:?50%; ??????background-color:?#fff; ??????transition:?margin-left?.2s; ????} ????:checked+.cs-switch?{ ??????color:?blueviolet; ????} ????/?選中移動(dòng)?/ ????:checked+.cs-switch::before?{ ??????margin-left:?18px; ????} ????/?禁用狀態(tài)?/ ????:disabled+.cs-switch?{ ??????opacity:?.4; ??????cursor:?not-allowed; ????} ??</style> </head> <body> ??<!-- 普通狀態(tài) --> ??<input type="checkbox" id="switch"> ??<label for="switch"></label> ??<!-- 選中狀態(tài) --> ??<input type="checkbox" id="switch1" checked> ??<label for="switch1"></label> ??<!-- 禁用狀態(tài) --> ??<input type="checkbox" id="switch2" disabled> ??<label for="switch2"></label> ??<!-- 選中禁用狀態(tài) --> ??<input type="checkbox" id="switch3" checked disabled> ??<label for="switch3"></label> </body> </html></pre> <p>運(yùn)行效果如下所示：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/757/983/883/1659496460999320.png" class="lazy" title="1659496460999320.png" alt="4.png"></p> <p><strong><span style="font-size: 18px;">5、邏輯組合偽類</span></strong></p> <p><strong><code>:not()</code>否定的偽類</strong></p> <ul style="list-style-type: disc;"> <li><p>優(yōu)先級(jí)為0，優(yōu)先級(jí)由括號(hào)中的表達(dá)式?jīng)Q定； <code>:not(p)</code>由p決定</p></li> <li><p>可以不斷的級(jí)聯(lián)；<br><code>input:not(:disabled):not(:read-only) {}</code> ;表示處于不禁用，也不處于只讀的狀態(tài)</p></li> <li><p>不可出現(xiàn)多個(gè)表達(dá)式，也不支持選擇符；<br><code>li:not(li, od)</code>; 尚未支持</p></li> </ul> <p>:not()的巨大的用處在于告別重置的問題；</p> <p>重置web中的樣式，就好比我們?cè)陧?xiàng)目中經(jīng)常使用到的：添加<code>.active</code>類名來控制樣式的顯示與隱藏/改變樣式，往常的寫法都是：</p> <pre class="brush:php;toolbar:false">.cs_li?{ display:?none; } .cs_li.active?{ display:?block; }</pre> <p>而我們可以使用<code>:not()</code>偽類，可以更好的實(shí)現(xiàn)：</p> <pre class="brush:php;toolbar:false">.cs_li:not(.active)?{ display:?none; }</pre> <p>在列表中的設(shè)置<code><li></code>的邊框時(shí)也可使用其<code>:not()</code></p> <pre class="brush:php;toolbar:false">.cs_li:not(:nth-of-type(5n)){ margin-right:?10px;?//?除5的倍數(shù)項(xiàng)都設(shè)置右邊的外邊距 }</pre> <p><strong><code>:is()</code>的作用是簡(jiǎn)化選擇器</strong></p> <p>平時(shí)我們開發(fā)中經(jīng)常會(huì)用到類似下面的語法：</p> <pre class="brush:php;toolbar:false">.cs_li_a?>?img, .cs_li_b?>?img, .cs_li_c?>?img?{ display:?none; }</pre> <p>使用<code>:is()</code>簡(jiǎn)化可寫成：</p> <pre class="brush:php;toolbar:false">:is(.cs_li_a,?.cs_li_b,?.cs_li_c)?>?img?{ display:?none; }</pre> <p>還有一種嵌套之間的關(guān)系，相互嵌套，交叉組合得出結(jié)論；如下方所示</p> <pre class="brush:php;toolbar:false">ol?ol?li, ol?ul?li,? ul?ul?li, ul?ol?li?{ margin-left:?20px; }</pre> <p>使用<code>:is()</code>偽類強(qiáng)化，則只需要幾行代碼：</p> <pre class="brush:php;toolbar:false">:is(ol,?ul)?:is(ol,?ul)?li{ margin-left:?20px; }</pre> <p><code><strong>:where()</strong></code></p> <p><code>:where()</code>與上方的:is()相同，唯一不同的是級(jí)別永遠(yuǎn)為0，也不受括號(hào)里面的表達(dá)式影響；</p> <p>使用的方法與:is()完全相同，但優(yōu)先級(jí)永遠(yuǎn)是0；底下的括號(hào)中的優(yōu)先級(jí)完全被忽略，倆句是同一個(gè)優(yōu)先級(jí)，并且級(jí)別等同于<code>.conten</code>選擇器</p> <pre class="brush:php;toolbar:false">:where(.article,?section)?.conten?{} :where(#article,?#section)?.conten?{</pre> <p>（學(xué)習(xí)視頻分享：<a href="http://ipnx.cn/course/list/1.html" target="_blank" textvalue="web前端入門">web前端入門</a>）</p><p>以上是css偽選擇器學(xué)習(xí)之偽類選擇器解析的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！</p> </div> </div> <div id="wjcelcm34c" class="wzconShengming_sp"> <div id="wjcelcm34c" class="bzsmdiv_sp">本站聲明</div> <div>本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請(qǐng)聯(lián)系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> <div id="wjcelcm34c" 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> <!-- <div id="wjcelcm34c" class="phpgenera_Details_mainR4"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" 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>熱門文章</h2> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/1796832397.html" title="Grass Wonder Build Guide \|烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide \|烏瑪媽媽漂亮的德比</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/1796833110.html" title="<??>：在森林里99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>：在森林里99夜 - 所有徽章以及如何解鎖</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By DDD</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/1796831605.html" title="烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個(gè)月前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/1796836699.html" title="Rimworld Odyssey溫度指南和Gravtech" class="phpgenera_Details_mainR4_bottom_title">Rimworld Odyssey溫度指南和Gravtech</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 周前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/1796831905.html" title="Windows安全是空白或不顯示選項(xiàng)" class="phpgenera_Details_mainR4_bottom_title">Windows安全是空白或不顯示選項(xiàng)</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個(gè)月前</span> <span>By 下次還敢</span> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh/article.html">顯示更多</a> </div> </div> </div> --> <div id="wjcelcm34c" class="phpgenera_Details_mainR3"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" 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>熱AI工具</h2> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom"> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh/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 id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>免費(fèi)脫衣服圖片</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh/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 id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh/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 id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>用于從照片中去除衣服的在線人工智能工具。</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh/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 id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI脫衣機(jī)</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh/ai/video-swap" title="Video Face Swap" 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/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！</p> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh/ai">顯示更多</a> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" 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>熱門文章</h2> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/1796832397.html" title="Grass Wonder Build Guide \|烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide \|烏瑪媽媽漂亮的德比</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/1796833110.html" title="<??>：在森林里99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>：在森林里99夜 - 所有徽章以及如何解鎖</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By DDD</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/1796831605.html" title="烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個(gè)月前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/1796836699.html" title="Rimworld Odyssey溫度指南和Gravtech" class="phpgenera_Details_mainR4_bottom_title">Rimworld Odyssey溫度指南和Gravtech</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 周前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/1796831905.html" title="Windows安全是空白或不顯示選項(xiàng)" class="phpgenera_Details_mainR4_bottom_title">Windows安全是空白或不顯示選項(xiàng)</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個(gè)月前</span> <span>By 下次還敢</span> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh/article.html">顯示更多</a> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" 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>熱工具</h2> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom"> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh/toolset/development-tools/92" title="記事本++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="記事本++7.3.1" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title"> <h3>記事本++7.3.1</h3> </a> <p>好用且免費(fèi)的代碼編輯器</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" 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漢化版" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title"> <h3>SublimeText3漢化版</h3> </a> <p>中文版，非常好用</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh/toolset/development-tools/121" title="禪工作室 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="禪工作室 13.0.1" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title"> <h3>禪工作室 13.0.1</h3> </a> <p>功能強(qiáng)大的PHP集成開發(fā)環(huán)境</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh/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 id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>視覺化網(wǎng)頁開發(fā)工具</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh/toolset/development-tools/500" title="SublimeText3 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 Mac版" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神級(jí)代碼編輯軟件(SublimeText3)</p> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh/ai">顯示更多</a> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" 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>熱門話題</h2> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1597</span> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1488</span> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>72</span> </div> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh/faq/zt">顯示更多</a> </div> </div> </div> </div> </div> <div id="wjcelcm34c" class="Article_Details_main2"> <div id="wjcelcm34c" class="phpgenera_Details_mainL4"> <div id="wjcelcm34c" 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 id="wjcelcm34c" class="phpgenera_Details_mainL4_info"> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh/faq/1796847548.html" title="描述'垂直align”屬性及其典型用例" 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/001/253/068/175348653092370.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="描述'垂直align”屬性及其典型用例" /> </a> <a href="http://ipnx.cn/zh/faq/1796847548.html" title="描述'垂直align”屬性及其典型用例" class="phphistorical_Version2_mids_title">描述'垂直align”屬性及其典型用例</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 26, 2025 am 07:35 AM</span> <p class="Articlelist_txts_p">1.ItAdjustSelementsLikeImagesRikeImagesOrformInputswithIntExtLineSustLineSlineSlineSlineSlikeLikeLikeBaseline，中間，Super，Super，Super和Sub.2.intablebecells，ItControlScontentalStalteNtalmscontentalMedwithThtop，Middle，Middle，Midder，Midder，經(jīng)常</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh/faq/1796847751.html" title="什么是口音色的物業(yè)？" 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/001/431/639/175349310138463.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="什么是口音色的物業(yè)？" /> </a> <a href="http://ipnx.cn/zh/faq/1796847751.html" title="什么是口音色的物業(yè)？" class="phphistorical_Version2_mids_title">什么是口音色的物業(yè)？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 26, 2025 am 09:25 AM</span> <p class="Articlelist_txts_p">accent-color是CSS中用于自定義復(fù)選框、單選按鈕和滑塊等表單元素高亮顏色的屬性；1.它直接改變表單控件選中狀態(tài)的默認(rèn)顏色，如將復(fù)選框的藍(lán)色勾選標(biāo)記改為紅色；2.支持的元素包括type="checkbox"、type="radio"和type="range"的輸入框；3.使用accent-color可避免復(fù)雜的自定義樣式和額外DOM結(jié)構(gòu)，保持原生可訪問性；4.現(xiàn)代瀏覽器普遍支持，舊瀏覽器需降級(jí)處理；5.設(shè)置accent-col</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh/faq/1796848248.html" title="如何將SCSS編譯到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/001/431/639/175355269194613.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何將SCSS編譯到CSS？" /> </a> <a href="http://ipnx.cn/zh/faq/1796848248.html" title="如何將SCSS編譯到CSS？" class="phphistorical_Version2_mids_title">如何將SCSS編譯到CSS？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 27, 2025 am 01:58 AM</span> <p class="Articlelist_txts_p">installdartsassvianpmafterinstallingnode.jsusingnpminstall-gsass.2.compilescsstocssssusingthecommandSassInput.scsssoutput.css.3。 useass - watchinput.scssoutput.csstoauto-compileonsave.4.watchentirefolderswithsass-watchscss：css.5.usepartialswith_prefixfo</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh/faq/1796848693.html" title="如何更改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/001/431/639/175356154230616.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何更改CSS中的文本顏色？" /> </a> <a href="http://ipnx.cn/zh/faq/1796848693.html" title="如何更改CSS中的文本顏色？" class="phphistorical_Version2_mids_title">如何更改CSS中的文本顏色？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 27, 2025 am 04:25 AM</span> <p class="Articlelist_txts_p">要改變CSS中文本顏色，需使用color屬性；1.使用color屬性可設(shè)置文本前景色，支持顏色名稱（如red）、十六進(jìn)制碼（如#ff0000）、RGB值（如rgb(255,0,0)）、HSL值（如hsl(0,100%,50%)）以及帶透明度的RGBA或HSLA（如rgba(255,0,0,0.5)）；2.可將顏色應(yīng)用于包含文本的任何元素，如h1至h6標(biāo)題、段落p、鏈接a（需注意a:link、a:visited、a:hover、a:active不同狀態(tài)的顏色設(shè)置）、按鈕、div、span等；3.最</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh/faq/1796847763.html" title="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/001/431/639/175349344020087.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS過渡教程" /> </a> <a href="http://ipnx.cn/zh/faq/1796847763.html" title="CSS過渡教程" class="phphistorical_Version2_mids_title">CSS過渡教程</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 26, 2025 am 09:30 AM</span> <p class="Articlelist_txts_p">csStransitionSenablesMoothPropertyChangesWithMinimalCode，ifealforHoverForpectSandInteractiveFeedback.1.usethesyntaxtransition：propertyDurationTimingTiming-functionDelayDelay; TodefineTrysitions; TodefinEtrys;</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh/faq/1796848423.html" title="如何清除未使用的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/001/431/639/175355565011578.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何清除未使用的CSS？" /> </a> <a href="http://ipnx.cn/zh/faq/1796848423.html" title="如何清除未使用的CSS？" class="phphistorical_Version2_mids_title">如何清除未使用的CSS？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 27, 2025 am 02:47 AM</span> <p class="Articlelist_txts_p">UseAutomatedToolSlikePurgecsSoruncsStoscanAndRemoveUnusedcss; 2. integratePuratePurgingIntoyourBuildProcessviawebpack，vite，vite，ortailwind ’scontentConfiguration; 3.AuditcsSusageWithChroMedEvtoolScoverAgeTabBeforgeForgingToavoidRemovingNeedEdedStyles; 4.safelistdynamic</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh/faq/1796847511.html" title="html'樣式”標(biāo)簽：內(nèi)聯(lián)與內(nèi)部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/001/253/068/175348579170092.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="html'樣式”標(biāo)簽：內(nèi)聯(lián)與內(nèi)部CSS" /> </a> <a href="http://ipnx.cn/zh/faq/1796847511.html" title="html'樣式”標(biāo)簽：內(nèi)聯(lián)與內(nèi)部CSS" class="phphistorical_Version2_mids_title">html'樣式”標(biāo)簽：內(nèi)聯(lián)與內(nèi)部CSS</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 26, 2025 am 07:23 AM</span> <p class="Articlelist_txts_p">樣式放置方式需根據(jù)場(chǎng)景選擇。1.Inline適合單元素臨時(shí)修改或JS動(dòng)態(tài)控制，如按鈕顏色隨操作變化；2.內(nèi)部CSS適合頁面少、結(jié)構(gòu)簡(jiǎn)單項(xiàng)目，便于集中管理樣式，如登錄頁基礎(chǔ)樣式設(shè)置；3.優(yōu)先考慮復(fù)用性、維護(hù)性及性能，大項(xiàng)目拆分外鏈CSS文件更優(yōu)。</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh/faq/1796847640.html" title="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/001/431/639/175348848095197.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS過濾屬性示例" /> </a> <a href="http://ipnx.cn/zh/faq/1796847640.html" title="CSS過濾屬性示例" class="phphistorical_Version2_mids_title">CSS過濾屬性示例</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 26, 2025 am 08:08 AM</span> <p class="Articlelist_txts_p">thecssfilterPropertyAppliesVisalEffectStoElementsDirectlyIncss，withCommonSiNCluding：1.Blur（）forsofteningimagesorcreatingdepth，2.brightness（brightness（toadjustlightnessordNessordOrdNess）</p> </div> </div> <a href="http://ipnx.cn/zh/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 id="wjcelcm34c" class="footer"> <div id="wjcelcm34c" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>公益在線PHP培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！</p> </div> <div id="wjcelcm34c" class="footermid"> <a href="http://ipnx.cn/zh/about/us.html">關(guān)于我們</a> <a href="http://ipnx.cn/zh/about/disclaimer.html">免責(zé)聲明</a> <a href="http://ipnx.cn/zh/update/article_0_1.html">Sitemap</a> </div> <div id="wjcelcm34c" class="footerbottom"> <p> ? php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="pmtei" class="pl_css_ganrao" style="display: none;"><acronym id="pmtei"></acronym><sup id="pmtei"></sup><font id="pmtei"><strong id="pmtei"></strong></font><table id="pmtei"><dfn id="pmtei"></dfn></table><bdo id="pmtei"></bdo><pre id="pmtei"><tbody id="pmtei"><tr id="pmtei"><sub id="pmtei"></sub></tr></tbody></pre><cite id="pmtei"><ol id="pmtei"><dl id="pmtei"></dl></ol></cite><track id="pmtei"></track><thead id="pmtei"><legend id="pmtei"></legend></thead><fieldset id="pmtei"></fieldset><ins id="pmtei"><ruby id="pmtei"><rp id="pmtei"><video id="pmtei"></video></rp></ruby></ins><abbr id="pmtei"></abbr><th id="pmtei"><var id="pmtei"></var></th><pre id="pmtei"></pre><code id="pmtei"></code><abbr id="pmtei"><li id="pmtei"></li></abbr><tbody id="pmtei"><address id="pmtei"><center id="pmtei"></center></address></tbody><delect id="pmtei"><tt id="pmtei"></tt></delect><input id="pmtei"><object id="pmtei"></object></input><sup id="pmtei"></sup><li id="pmtei"><bdo id="pmtei"><listing id="pmtei"></listing></bdo></li><dl id="pmtei"></dl><address id="pmtei"></address><acronym id="pmtei"></acronym><strong id="pmtei"><bdo id="pmtei"><var id="pmtei"><strong id="pmtei"></strong></var></bdo></strong><menu id="pmtei"></menu><nobr id="pmtei"></nobr><small id="pmtei"></small><pre id="pmtei"><s id="pmtei"><strike id="pmtei"></strike></s></pre><menuitem id="pmtei"><center id="pmtei"></center></menuitem><thead id="pmtei"><acronym id="pmtei"><em id="pmtei"><dfn id="pmtei"></dfn></em></acronym></thead><form id="pmtei"></form><output id="pmtei"><ruby id="pmtei"><rp id="pmtei"></rp></ruby></output><em id="pmtei"></em><strong id="pmtei"></strong><sub id="pmtei"></sub><center id="pmtei"><progress id="pmtei"><tr id="pmtei"></tr></progress></center><thead id="pmtei"></thead><meter id="pmtei"></meter><td id="pmtei"><dd id="pmtei"></dd></td><legend id="pmtei"></legend><strong id="pmtei"></strong><rp id="pmtei"><video id="pmtei"></video></rp><video id="pmtei"></video><menu id="pmtei"><style id="pmtei"></style></menu><strike id="pmtei"><dl id="pmtei"></dl></strike><form id="pmtei"><ul id="pmtei"><kbd id="pmtei"></kbd></ul></form><source id="pmtei"><p id="pmtei"><span id="pmtei"><dd id="pmtei"></dd></span></p></source><thead id="pmtei"></thead></div> </html>