16.CSS选择器【下】
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?第十三章 ?CSS選擇器【下】
一、偽類選擇器總匯
二、結構性偽類選擇器 ：能夠根據元素在文檔中的位置選擇元素，這類元素都有一個前綴（:）
???1、根元素選擇器 :（基本不怎么用，因為總是返回<html>元素）
???2、子元素選擇器 :（偽類都需要加上前置來限制范圍）
?????????（1） ?<ul><li></li><li></li>....</li> ??//第一組<li>..</li>為紅色
????????例： ?ul > li:first-child{ ??????????????
?????????????????color:red;
??????????????}
?????????（2） 最后用一組為紅色 ???
????????例： ?ul > li:last-child{ ??????????????
?????????????????color:red;
??????????????}
?????????（3） ?只能是只有一個元素的那個子元素 ?????
????????例： ?ul > li:only-child{ ??????????????
?????????????????color:red;
??????????????}
?????????（4）（如果有多組div時，第一組div里有多種元素類型且每種只有一個，那么，這一組的div第一行變紅） ??????
????????例： ?div > p:only-of-type{ ??????????????
?????????????????color:red;
??????????????}
???3、nth-child（n）系列
????????例： ?ul > li:nth-child(2){ ?????//第二組為紅色 ??????????????
?????????????????color:red;
??????????????}
???4、
????????例： ?ul > li:nth-last-child(2){ ?????//倒數第二組為紅色 ??????????????
?????????????????color:red;
??????????????}
???5、選擇特定子元素的第二個元素（每組div里第二個p元素變為紅色，如果沒有第二個p元素，這沒什么變化）
????????例： ?div > p:nth-of-type(2){ ?????// ??????????????
?????????????????color:red;
??????????????}
???6、選擇特定子元素的倒數第二個元素
????????例： ?div > p:nth-last-of-type(2){ ??????????????
?????????????????color:red;
??????????????}
三、UI偽類選擇器
???1、:enabled ?選擇啟用狀態的元素；
???2、:disabled ??選擇禁用狀態的元素；
???3、:checked ?選擇勾選的input元素；
???4、:default ?從一組類似的元素中選擇默認元素。比如input勾選的既默認的。
???5、:valid和:invalid ?輸入驗證合法和不合法顯示時選擇的元素。
????????????input:valid{ ????????????????????????input:invalid{
???????????????border:1px solid blue; ??????????????border:1px solid red;
????????????} ???????????????????????????????????}
???????//輸入正確，輸入框為藍色，輸入格式錯誤，則輸入框為紅色
???6、:required ?（必填字符）和:optional ?（可以不填寫）
四、動態偽類選擇器
???1、:link ?(表示未訪問的超鏈接)和:visited（表示已訪問的超鏈接）
???2、:hover ?表示鼠標懸停在超鏈接上 （懸停的意思是放在按鈕上但是不點擊，會變色）
???3、:active ?表示鼠標按下超鏈接時 ?（點下去但是不松開，會變色）
???4、:focus ?針對文本框，獲取光標的時候，會變成設計的顏色
五、其他偽類選擇器
???1、:not ?否定選擇器，反選, ??//除了含有baidu的網址，其他都為紅色
????????????a:not([href*="baidu"]){
???????????????color:red;
????????????}
???2、:empty ??匹配沒有任何內容的元素 ?（空元素的隱藏屬性是換行）
??????????:empty{
??????????????display:none; ????//把空元素隱藏
??????????}
???3、:lang
??????????:lang(en){color:red;}
???4、:targer ?定位到錨點的時候使用此元素
?
轉載于:https://www.cnblogs.com/keshuai752100461/p/8485148.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的16.CSS选择器【下】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHP-redis中文文档
- 下一篇： Codeforces 458C - El