css3中的属性选择器以及新增伪类
生活随笔
收集整理的這篇文章主要介紹了
css3中的属性选择器以及新增伪类
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
屬性選擇器：
? ? ? ?img[alt]：選擇有alt屬性的img標簽
? ? ? ? img[alt="故宮"]：選擇alt屬性是故宮的img標簽
? ? ? ? img[alt^="北京"]：選擇alt屬性是以北京開頭的img標簽
? ? ? ? img[alt$="夜景"]：選擇alt屬性以夜景結尾的img標簽
? ? ? ? img[alt*="美"]：選擇alt屬性中含有美字的img標簽
? ? ? ? img[alt~="手機拍攝"]：選擇alt屬性中有空格隔開的手機拍攝字樣的img標簽
? ? ? ? img[alt|="參賽作品"]：選擇alt屬性以“參賽作品-”開頭的img標簽
新增偽類：
? ? ? ?:empty：選擇空標簽
? ? ? ? :focus：選擇當前獲得焦點的表單元素
? ? ? ? :enabled：選擇當前有效的表單元素
? ? ? ? :disabled：選擇當前無效的表單元素
? ? ? ? :checked：選擇當前已經勾選的單選按鈕或者復選框
? ? ? ? :root：選擇根元素，即<html>標簽
<!DOCTYPE html> <html lang="en"> <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>Document</title><style>.para{/* 寬度、高度 */width: 200px;height: 200px;/* 邊框 */border: 1px solid cyan;}.para:empty{background: red;}input:focus{background: blue;}input:disabled{border: 1px solid rosybrown;}input:enabled{border: 1px solid royalblue;}input:checked+span{color: seagreen;}:root{font-size: 20px;}</style> </head> <body><p class="para">1</p><p class="para"></p><p class="para">2</p><p class="para"> </p><p><input type="text"><input type="text" disabled><input type="text" disabled><input type="text"><input type="text"></p><p><label><input type="checkbox"><span>文字</span></label><label><input type="checkbox"><span>文字</span></label><label><input type="checkbox"><span>文字</span></label><label><input type="checkbox"><span>文字</span></label></p> </body> </html>總結
以上是生活随笔為你收集整理的css3中的属性选择器以及新增伪类的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 曾国藩如何读书
- 下一篇： 我的阅读习惯 俞敏洪