css3選擇器分類
CSS3選擇器分類如下圖所示
選擇器的語法
1.基本選擇器
| 型別 | 代碼 | 功能描述 |
| 通配選擇器 | *{ margin: 0; padding: 0; border: none; } | 選擇檔案中所有HTML元素 |
| 元素選擇器 | body { background: #eee; } | 選擇指定型別的HTML元素 |
| 類選擇器 | .list { list-style: square; } |
選擇指定class屬性值為“class”的 任意型別的任意多個元素 |
| ID選擇器 | #list { width: 500px; margin: 0 auto; } | 選擇指定ID屬性值為“id”的任意型別元素 |
| 后代選擇器 | .list li { margin: 10px; background: #fff; } | 選擇作為某元素后代的元素， |
基本選擇器擴展
| 型別 | 代碼 | 功能描述 |
| 子元素選擇器 | #wrap > .inner. {color: pink;} |
也可稱為直接后代選擇器， 此類選擇器只能匹配到直接后代， 不能匹配到深層次的后代元素 |
| 相鄰兄弟選擇器 | #wrap #first+.inner{color:#f00; } | 它只會匹配緊跟著的兄弟元素 |
| 通用兄弟選擇器 | #wrap #first ~ div { border: 1px solid;} | 它會匹配所有的兄弟元素(不需要緊跟) |
| 選擇器分組 | h1,h2,h3{color: pink;} | 此處的逗號我們稱之為結合符 |
2.屬性選擇器
（1）存在和值屬性選擇器
| 選擇器 | 功能描述 |
| [attribute=value] | 用于選取帶有指定屬性和值的元素， |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素， |
| [attribute] | 用于選取帶有指定屬性的元素， |
（2）子串值屬性選擇器
| 選擇器 | 功能描述 |
| [attr|=val] | 用于選取帶有以指定值開頭的屬性值的元素， |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素， |
| [attribute$=value] | 匹配屬性值以指定值結尾的每個元素， |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素， |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/232396.html
標籤：Html/Css
上一篇：蒲公英 · JELLY技術周刊 Vol.33: 前端基礎課堂開課啦～
下一篇：vue瀑布流布局