CSS選擇器
標簽選擇器
什么是標簽選擇器?
作用: 根據指定的標簽名稱, 在當前界面中找到所有該名稱的標簽, 然后設置屬性
格式:
標簽名稱{
屬性:值;
}
- 注意點:
- 標簽選擇器選中的是當前界面中所有的標簽, 而不能單獨選中某一個標簽
- 標簽選擇器無論標簽藏得多深都能選中
id選擇器
什么是id選擇器?
作用: 根據指定的id名稱找到對應的標簽, 然后設置屬性
格式
#id名稱{
屬性:值;
}
- 注意點
- 個HTML標簽都有一個屬性叫做id, 也就是說每個標簽都可以設置id
- 在同一個界面中id的名稱是不可以重復的
- 在編寫id選擇器時一定要在id名稱前面加上#
- id的名稱是有一定的規范的
- id的名稱只能由字母/數字/下劃線(a-z 0-9 _)
- id名稱不能以數字開頭
- id名稱不能是HTML標簽的名稱()不能是a h1 img input ...)
- 在企業開發中一般情況下如果僅僅是為了設置樣式, 我們不會使用id ,因為在前端開
發中id一般留給js使用的
類選擇器
什么是類選擇器?
作用: 根據指定的類名稱找到對應的標簽, 然后設置屬性
格式
.類名{
屬性:值;
}
- 注意點:
- 每個HTML標簽都有一個屬性叫做class, 也就是說每個標簽都可以設置類名
- 在同一個界面中class的名稱是可以重復的
- 在編寫class選擇器時一定要在class名稱前面加上點
- 類名的命名規范和id名稱的命名規范一樣
- 類名就是專門用來給CSS設置樣式的
- 在HTML中每個標簽可以同時綁定多個類名
格式:
<標簽名稱 class="類名1 類名2 ...">
錯誤的寫法:
<p class="para1" class="para2">
id選擇器和類選擇器
id和class的區別?
-
1.1
- id相當于人的身份證不可以重復
- class相當于人的名稱可以重復
-
1.2
- 一個HTML標簽只能綁定一個id名稱
- 一個HTML標簽可以綁定多個class名稱
d選擇器和class選擇器區別?
id選擇器是以#開頭
class選擇器是以.開頭
在企業開發中到底用id選擇器還是用class選擇器?
id一般情況下是給js使用的, 所以除非特殊情況, 否則不要使用id去設置樣式
在企業開發中一個開發人員對類的使用可以看出這個開發人員的技術水平
一般情況下在企業開發中要注重冗余代碼的抽取, 可以將一些公共的代碼抽取到一個類選擇器中, 然后讓標簽和這個類選擇器綁定即可
后代選擇器
什么是后代選擇器?
作用: 找到指定標簽的所有特定的后代標簽, 設置屬性
格式:
標簽名稱1 標簽名稱2{
屬性:值;
}
先找到所有名稱叫做"標簽名稱1"的標簽, 然后再在這個標簽下面去查找所有名稱叫做"標簽名稱2"的標簽, 然后在設置屬性
注意點:
后代選擇器必須用空格隔開
后代不僅僅是兒子, 也包括孫子/重孫子, 只要最終是放到指定標簽中的都是后代
后代選擇器不僅僅可以使用標簽名稱, 還可以使用其它選擇器
后代選擇器可以通過空格一直延續下去
子元素選擇器
什么是子元素選擇器?
作用: 找到指定標簽中所有特定的直接子元素, 然后設置屬性
格式:
標簽名稱1>標簽名稱2{
屬性:值;
}
先找到所有名稱叫做"標簽名稱1"的標簽, 然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素
注意點:
子元素選擇器只會查找兒子, 不會查找其他被嵌套的標簽
子元素選擇器之間需要用>符號連接, 并且不能有空格
子元素選擇器不僅僅可以使用標簽名稱, 還可以使用其它選擇器
子元素選擇器可以通過>符號一直延續下去
后代選擇器和子元素選擇器
后代選擇器和子元素選擇器之間的區別?
-
1.1
- 后代選擇器使用空格作為連接符號
- 子元素選擇器使用>作為連接符號
-
1.2
- 后代選擇器會選中指定標簽中, 所有的特定后代標簽, 也就是會選中兒子/孫子..., 只要是被放到指定標簽中的特定標簽都會被選中
- 子元素選擇器只會選中指定標簽中, 所有的特定的直接標簽, 也就是只會選中特定的兒子標簽
后代選擇器和子元素選擇器之間的共同點
-
2.1
- 后代選擇器和子元素選擇器都可以使用標簽名稱/id名稱/class名稱來作為選擇器
-
2.2
- 后代選擇器和子元素選擇器都可以通過各自的連接符號一直延續下去
選擇器1>選擇器2>選擇器3>選擇器4{}
- 后代選擇器和子元素選擇器都可以通過各自的連接符號一直延續下去
在企業開發中如何選擇
如果想選中指定標簽中的所有特定的標簽, 那么就使用后代選擇器
如果只想選中指定標簽中的所有特定兒子標簽, 那么就使用子元素選擇器
交集選擇器
什么是交集選擇器?
作用: 給所有選擇器選中的標簽中, 相交的那部分標簽設置屬性
格式:
選擇器1選擇器2{
屬性: 值;
}
注意點:
選擇器和選擇器之間沒有任何的連接符號
選擇器可以使用標簽名稱/id名稱/class名稱
交集選擇器僅僅作為了解, 企業開發中用的并不多
交集一定要范圍大的在前邊
并集選擇器
什么是并集選擇器?
作用: 給所有選擇器選中的標簽設置屬性
格式:
選擇器1,選擇器2{
屬性:值;
}
- 注意點:
- 并集選擇器必須使用,來連接
- 選擇器可以使用標簽名稱/id名稱/class名稱
兄弟選擇器
-
相鄰兄弟選擇器
什么是相鄰兄弟選擇器 CSS2
作用: 給指定標簽后面緊跟的那個標簽設置屬性
格式:
選擇器1+選擇器2{
屬性:值;
}
- 注意點:
- 相鄰兄弟選擇器必須通過+連接
- 相鄰兄弟選擇器只能選中緊跟其后的那個標簽, 不能選中被隔開的標簽
-
通用兄弟選擇器
什么是通用兄弟選擇器 CSS3
作用: 給指定選擇器后面的所有選擇器選中的所有標簽設置屬性
格式:
選擇器1~選擇器2{
屬性:值;
}
- 注意點:
- 通用兄弟選擇器必須用~連接
- 通用兄弟選擇器選中的是指定選擇器后面某個選擇器選中的所有標簽, 無論有沒有被隔開都可以選中
序選擇器
序選擇器是CSS3中新增的選擇器最具代表性的就是序選擇器
什么是序選擇器?
作用: 選中指定的任意標簽然后設置屬性
格式:
-
1.同級別的第幾個
- :first-child 選中同級別中的第一個標簽
- :last-child 選中同級別中的最后一個標簽
:nth-child(n) 選中同級別中的第n個標簽
:nth-last-child(n) 選中同級別中的倒數第n個標簽
:only-child 選中父元素中唯一的標簽
注意點: 不區分類型
2.同級同類型的第幾個
:first-of-type 選中同級別中同類型的第一個標簽
:last-of-type 選中同級別中同類型的最后一個標簽
:nth-of-type(n) 選中同級別中同類型的第n個標簽
:nth-last-of-type(n) 選中同級別中同類型的倒數第n個標簽
:only-of-type 選中父元素中唯一類型的某個標簽
3.其它用法
:nth-child(odd) 選中同級別中的所有奇數
:nth-child(even) 選中同級別中的所有偶數
:nth-child(xn+y)
x和y是用戶自定義的, 而n是一個計數器, 從0開始遞增
:nth-of-type(odd) 選中同級別中同類型的所有奇數
:nth-of-type(even) 選中同級別中同類型的所有偶數
:nth-of-type(xn+y)
x和y是用戶自定義的, 而n是一個計數器, 從0開始遞增
屬性選擇器
什么是屬性選擇器?
作用: 根據指定的屬性名稱找到對應的標簽, 然后設置屬性
格式:
[attribute]
- 作用:根據指定的屬性名稱找到對應的標簽, 然后設置屬性
[attribute=value]
- 作用: 找到有指定屬性, 并且屬性的取值等于value的標簽, 然后設置屬性
- 最常見的應用場景, 就是用于區分input屬性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
屬性的取值是以什么開頭的
[attribute|=value] CSS2
[attribute^=value] CSS3
兩者之間的區別:
CSS2中的只能找到value開頭,并且value是被-和其它內容隔開的
CSS3中的只要是以value開頭的都可以找到, 無論有沒有被-隔開
屬性的取值是以什么結尾的
[attribute$=value] CSS3
屬性的取值是否包含某個特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
兩者之間的區別:
CSS2中的只能找到獨立的單詞, 也就是包含value,并且value是被空格隔開的
CSS3中的只要包含value就可以找到, 無論有沒有被隔開
通配符選擇器
什么是通配符選擇器?
作用: 給當前界面上所有的標簽設置屬性
格式:
*{
屬性:值;
}
注意點:
由于通配符選擇器是設置界面上所有的標簽的屬性, 所以在設置之前會遍歷所有的標簽, 如果當前界面上的標簽比較多, 那么性能就會比較差, 所以在企業開發中一般不會使用通配符選擇器
CSS三大特性
繼承性
什么是繼承性?
作用: 給父元素設置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性
示例代碼:
- 注意點:
- 并不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
- 在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
- 繼承性中的特殊性
- a標簽的文字顏色和下劃線是不能繼承的
- h標簽的文字大小是不能繼承的
- 應用場景:
- 一般用于設置網頁上的一些共性信息, 例如網頁的文字顏色, 字體,文字大小等內容
層疊性
CSS全稱 Cascading StyleSheet (層疊式樣式表), 其中的層疊就是指層疊性
什么是層疊性?
作用: 層疊性就是CSS處理沖突的一種能力
示例代碼
- 最終顯示藍色, 因為紅色被覆蓋掉了
優先級
1 什么是優先級?
作用:當多個選擇器選中同一個標簽, 并且給同一個標簽設置相同的屬性時, 如何層疊就由優先級來確定
2.優先級判斷的三種方式
-
2.1間接選中就是指繼承
- 如果是間接選中, 那么就是誰離目標標簽比較近就聽誰的
-
2.2相同選擇器(直接選中)
- 如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的
-
2.3不同選擇器(直接選中)
- 如果都是直接選中, 并且不是相同類型的選擇器, 那么就會按照選擇器的優先級來層疊
優先級:
id>類>標簽>通配符>繼承>瀏覽器默認
- 注意點:
- 通配符選擇器也是直接選中
優先級權重
什么是優先級的權重?
作用: 當多個選擇器混合在一起使用時, 我們可以通過計算權重來判斷誰的優先級最高
權重的計算規則
首先先計算選擇器中有多少個id, id多的選擇器優先級最高
如果id的個數一樣, 那么再看類名的個數, 類名個數多的優先級最高
如果類名的個數一樣, 那么再看標簽名稱的個數, 標簽名稱個數多的優先級最高
如果id個數一樣, 類名個數也一樣, 標簽名稱個數也一樣, 那么就不會繼續往下計算了, 那么此時誰寫在后面聽誰的
示例代碼
- 注意點:
- 只有選擇器是直接選中標簽的才需要計算權重, 否則一定會聽直接選中的選擇器的
!important
什么是!important
作用: 用于提升某個直接選中標簽的選擇器中的某個屬性的優先級的, 可以將被指定的屬性的優先級提升為最高
-示例代碼
注意點:
!important只能用于直接選中, 不能用于間接選中
通配符選擇器選中的標簽也是直接選中的
!important只能提升被指定的屬性的優先級, 其它的屬性的優先級不會被提升
!important必須寫在屬性值得分號前面
!important前面的感嘆號不能省略
