CSS各類選擇器總結
阿新 • • 發佈:2018-07-24
bsp 不同的 紅色 們的 情況 css 作用 nbsp ack
首先來說一下,什麽是選擇器。在一個HTML頁面中會有很多很多的元素,不同的元素可能會有不同的樣式,某些元素又需要設置相同的樣式,選擇器就是用來從HTML頁面中查找特定元素的,找到元素之後就可以為它們設置樣式了。 選擇器為樣式規則指定一個作用範圍。
基本選擇器
標簽選擇器
顧名思義就是通過標簽名來選擇元素:
- 標簽選擇器可以選中所有的標簽元素,比如div,ul,li ,p等等
- 不管標簽藏的多深,都能選中
- 選中的是所有的,而不是某一個,所以說 "共性" 而不是 ”特性“
實例:
p {
color: red;
}
將所有的p標簽設置字體顏色為紅色。
ID選擇器
通過元素的ID值選擇元素:
- 同一個頁面中 id 不能重復
- 任何的標簽都可以設置 id
- id命名規範 要以字母 可以有數字 下劃線 - 大小寫嚴格區分 aa和AA
示例:
#i1 {
color: red;
}
將id值為i1
的元素字體顏色設置為紅色。
類選擇器
通過樣式類選擇元素:
- 類就是class;class與id非常相似;任何的標簽都可以加類;但是類是可以重復,歸類
- 同一個標簽中可以攜帶多個類,用空格隔開
- 類的使用能夠決定前端工程師的css水平到底有多牛逼,要多用,一定要有”公共類“的概念
總結:
- 不要去試圖用一個類將我們的頁面寫完。這個標簽要攜帶多個類,共同設置樣式
- 每個類要盡可能的小,有公共的概念,能夠讓更多的標簽使用
- 到底使用id還是用class?
- 答案:盡可能的用class。除非一些特殊情況可以用id
- 原因:id一般是用在js的。也就是說 js是通過id來獲取到標簽
示例:
.c1 {
color: red;
}
將所有樣式類含.c1
的元素設置字體顏色為紅色。
通用選擇器
使用*
選擇所有元素:
* {
color: black;
}
因為效率低的原因,一般不用
組合選擇器
屬性選擇器
分組選擇器
偽類選擇器
偽元素選擇器
選擇器的優先級
CSS各類選擇器總結