CSS 僞類(下)結構性僞類\UI僞類\動態僞類和其餘僞類 valid check enable child required link visit

 

1. 僞類選擇器彙總
   僞類選擇器有4種, 結構性僞類\UI僞類\動態僞類和其餘僞類. 具體以下

2. 結構性僞類選擇器結構性僞類選擇器
   它可以根據元素在文檔中的位置選擇元素, 這類元素都有個前綴":"
   1. 根元素選擇器 只做用於html等底部標籤.不多用 ..

   :root

                           

   
   2. 子元素選擇器 子元素全選還要更細緻                                    

   ul>li:first-child{ } 增長僞類first-child 第一個

   ul>li:last-child{ } 增長僞類last-child 最後一個    

   ul>li:only-child{ } 增長僞類only-child 那些只有一個的,影響這個獨生子

   div>p: only-of type{ } 增長僞類only-of-type 選擇指定類型的那個子元素, 其實功能和 單單的div>p相似

    

    

   僞類都須要加上前置選擇器來限制範圍

    

   3. ul>li:nth-child(2) { } ul下的li 的第二個子元素

   ul>li:nth-last-child(2) { } …. 倒數第二個

   其餘:

3. UI僞類選擇器

   :enable

   :disable

    

   html文件

   css文件

   效果

:checked 勾選的生效

html文件

css文件

將被勾選的隱藏起來

:default 默認的生效, 不多用

css文件

:valid 合法時生效

:invalid 不合法時生效

html文件

css文件

填對了數字, 就變成綠色了.

:required 必填部分生效

optional 不是必填的生效

 

html文件            

css文件

 

a:link 做用於a 標籤間的文本

input:focus

切換文本輸入光標, 輸入框變了顏色

 

1. 其餘僞類選擇器

   :not 反選 重點掌握

   不含baidu的超連接爲紅色

    

   :empty 做用空標籤, 有點像word的替換空格的意思

    

   html文件

   替換前

   css文件

   若是想不影響某些爲空的部分,能夠指定如

   p:empty{ } 那css就隻影響p下的空標籤

    

    

   替換後

    

   :lang

   :target 頁面內定位錨點, 必定位馬上生效

    

   name 或者id 均可以的, 錨點是能夠設置在任何標籤的, 至於超連接<a href=#錨點名稱>只不過是一個超連接,這裏直接在瀏覽器輸入#錨點名稱效果就是跟按了href以後同樣的.

    

    

   測試的時候, 在最末尾加上"# 錨點名稱"

   效果(實際上定位錨點更可能是在一些很長的頁面, 一點就定位到. 並且邊成紅色了.)