建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
如何理解CSS中的UI偽類(lèi)，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
創(chuàng)新互聯(lián)于2013年開(kāi)始，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元吉安做網(wǎng)站,已為上家服務(wù),為吉安各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):18980820575
偽類(lèi)（Pseudo classes）是選擇符的螺栓，用來(lái)指定一個(gè)或者與其相關(guān)的選擇符的狀態(tài)。它們的形式是 selector:pseudo class { property: value; }，簡(jiǎn)單地用一個(gè)半角英文冒號(hào)（:）來(lái)隔開(kāi)選擇符和偽類(lèi)。
偽類(lèi)可以分為兩種：
UI（ User Interface，用戶(hù)界面）偽類(lèi)會(huì)在 HTML 元素處于某個(gè)狀態(tài)時(shí)（比如鼠標(biāo)
指針位于鏈接上），為該元素應(yīng)用 CSS 樣式。
結(jié)構(gòu)化偽類(lèi)會(huì)在標(biāo)記中存在某種結(jié)構(gòu)上的關(guān)系時(shí)（如某個(gè)元素是一組元素中的第
一個(gè)或最后一個(gè)），為相應(yīng)元素應(yīng)用 CSS 樣式。
UI偽類(lèi)
鏈接偽類(lèi)
針對(duì)鏈接的偽類(lèi)一共有4個(gè)，因?yàn)殒溄邮冀K會(huì)處于如下4種狀態(tài)之一。
Link
Visited
Hover
Active
提示：由于這4個(gè)偽類(lèi)的特指度相同，如果不按照這里列出的順序使用它們，瀏覽器可能不會(huì)顯示預(yù)期效果。方便記憶：LoVe? HA! 大寫(xiě)字母就是每個(gè)偽類(lèi)的頭一個(gè)字母。
提示：一個(gè)冒號(hào)（ : ）表示偽類(lèi)，兩個(gè)冒號(hào)（ :: ）表示 CSS3 新增的偽元素。
focus偽類(lèi)
表單中的文本字段在用戶(hù)單擊它時(shí)會(huì)獲得焦點(diǎn)，然后用戶(hù)才能在其中輸入字符。
例如：input:focus {border:1px solid blue;}
上面一行代碼會(huì)在光標(biāo)位于 input 字段中時(shí)，為該字段添加一個(gè)藍(lán)色邊框。這樣可以讓用戶(hù)明確地知道輸入的字符會(huì)出現(xiàn)在哪里。
target偽類(lèi)
如果用戶(hù)點(diǎn)擊一個(gè)指向頁(yè)面中其他元素的鏈接，則那個(gè)元素就是目標(biāo)（ target），可以
用:target 偽類(lèi)選中它。
例如：對(duì)于這個(gè)鏈接：More Information
位于頁(yè)面的其它地方、ID 為 more_info 的那個(gè)元素就是目標(biāo)。
假設(shè)該元素為這樣：
This is the information you are looking for.
那么，CSS規(guī)則：#more_info:target {background:#eee}
會(huì)在用戶(hù)單擊鏈接轉(zhuǎn)向 ID 為 more_info 的元素時(shí)，為該元素添加灰色背景。
維基百科在其引證中大量使用了:target 偽類(lèi)。維基百科的引證鏈接就是正文里那些
不起眼的數(shù)字鏈接。引證本身則位于長(zhǎng)長(zhǎng)的頁(yè)面的最下方。如果沒(méi)有:target 應(yīng)用的
突出顯示，很難知道你點(diǎn)擊的鏈接對(duì)應(yīng)著一大堆引證中的哪一個(gè)。
結(jié)構(gòu)化偽類(lèi)
結(jié)構(gòu)化偽類(lèi)可以根據(jù)標(biāo)記的結(jié)構(gòu)應(yīng)用樣式，比如根據(jù)某元素的父元素或前面的同胞元素是什么。
first-child和:last-child
格式：
CSS Code復(fù)制內(nèi)容到剪貼板
e:first-child
e:last-child
示例：
CSS Code復(fù)制內(nèi)容到剪貼板
ol.results li:first-child {color:blue;}
nth-child
格式：
CSS Code復(fù)制內(nèi)容到剪貼板
e:nth-child(n)
示例：
CSS Code復(fù)制內(nèi)容到剪貼板
li:nth-child(3)
說(shuō)明：e 表示元素名，n 表示一個(gè)數(shù)值（也可以使用 odd 或 even）
看完上述內(nèi)容，你們掌握如何理解CSS中的UI偽類(lèi)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
文章題目：如何理解CSS中的UI偽類(lèi)
URL網(wǎng)址：http://fisionsoft.com.cn/article/ijjgsd.html
