id選擇器
作用
根據指定的id名稱找到對應的標簽, 然后設置屬性
格式
#id名稱{
屬性名稱：值；
}
- 注意點:
- 每個HTML標簽都可以設置id
- 在同一個界面中id的名稱不可以重復
- 在編寫id選擇器時一定要在id名稱前面加上#
- id的名稱是有一定的規范的,id的名稱只能由字母/數字/下劃線(a-z 0-9 _),id名稱不能以數字開頭
- id名稱不能是HTML標簽的名稱(不能是a h1 img input ...)
- 在企業開發中一般情況下如果僅僅是為了設置樣式, 我們不會使用id ,因為在前端開發中id一般留給js使用的
類選擇器
作用
根據指定的類名稱找到對應的標簽, 然后設置屬性
格式
.類名稱{
屬性名稱：值；
}
- 注意點:
- 每個HTML標簽都可以設置類名
- 在同一個界面中class的名稱是可以重復的
- 在編寫class選擇器時一定要在class名稱前面加上點
- 類名的命名規范和id名稱的命名規范一樣
- 類名就是專門用來給CSS設置樣式的
- 在HTML中每個標簽可以同時綁定多個類名
格式:
<標簽名稱 class="類名1 類名2 ...">
標簽選擇器
作用
根據指定的標簽名稱, 在當前界面中找到所有該名稱的標簽, 然后設置屬性
格式
標簽名稱{
屬性名稱：值；
}
- 注意點:
- 標簽選擇器選中的是當前界面中所有的標簽, 而不能單獨選中某一個標簽
- 標簽選擇器無論標簽藏得多深都能選中
后代選擇器
作用
找到指定標簽的所有特定的后代標簽, 設置屬性
格式
標簽名稱1 標簽名稱2{
屬性:值;
}
先找到所有名稱叫做"標簽名稱1"的標簽, 然后再在這個標簽下面去查找所有名稱叫做"標簽名稱2"的標簽, 然后再設置屬性
注意點:
后代選擇器必須用空格隔開
后代不僅僅是兒子, 也包括孫子/重孫子, 只要最終是放到指定標簽中的都是后代
后代選擇器不僅僅可以使用標簽名稱, 還可以使用其它選擇器
后代選擇器可以通過空格一直延續下去
子代選擇器
作用
找到指定標簽中所有特定的直接子元素, 然后設置屬性
格式
標簽名稱1>標簽名稱2{
屬性:值;
}
先找到所有名稱叫做"標簽名稱1"的標簽, 然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素
注意點:
子元素選擇器之間需要用>符號連接, 并且不能有空格
子元素選擇器只會查找兒子, 不會查找其他被嵌套的標簽
子代選擇器不僅僅可以使用標簽名稱, 還可以使用其它選擇器
子元素選擇器可以通過>符號一直延續下去
交集選擇器
作用
給所有選擇器選中的標簽中, 相交的那部分標簽設置屬性
格式
標簽名稱1標簽名稱2{
屬性:值;
}
- 注意點:
- 選擇器和選擇器之間沒有任何的連接符號
- 選擇器可以使用標簽名稱/id名稱/class名稱
- 交集選擇器僅僅作為了解, 企業開發中用的并不多
并集選擇器
作用
給所有選擇器選中的標簽設置屬性
格式
標簽名稱1，標簽名稱2{
屬性:值;
}
- 注意點:
- 并集選擇器必須使用,來連接
- 選擇器可以使用標簽名稱/id名稱/class名稱
兄弟選擇器
相鄰兄弟選擇器 （CSS2）
作用
給指定標簽后面緊跟的那個標簽設置屬性
格式
標簽名稱1+標簽名稱2{
屬性:值;
}
- 注意點:
- 相鄰兄弟選擇器必須通過+連接
- 相鄰兄弟選擇器只能選中緊跟其后的那個標簽, 不能選中被隔開的標簽
通用兄弟選擇器（CSS3）
- 作用
- 給指定選擇器后面的所有選擇器選中的所有標簽設置屬性
- 格式
標簽名稱1～標簽名稱2{
屬性:值;
}
- 注意點:
- 通用兄弟選擇器必須用~連接
- 通用兄弟選擇器選中的是指定選擇器后面某個選擇器選中的所有標簽, 無論有沒有被隔開都可以選中
序選擇器
作用
序選擇器是CSS3中新增的選擇器中最具代表性的，選中指定的任意標簽然后設置屬性
格式
-
同級別的第幾個
- :first-child 選中同級別中的第一個標簽
- :last-child 選中同級別中的最后一個標簽
- :nth-child(n) 選中同級別中的第n個標簽
- :nth-last-child(n) 選中同級別中的倒數第n個標簽
- :only-child 選中父元素中唯一的標簽
-
注意點
- 不區分類型
-
同級同類型的第幾個
- :first-of-type 選中同級別中同類型的第一個標簽
- :last-of-type 選中同級別中同類型的最后一個標簽
- :nth-of-type(n) 選中同級別中同類型的第n個標簽
- :nth-last-of-type(n) 選中同級別中同類型的倒數第n個標簽
- :only-of-type 選中父元素中唯一類型的某個標簽
-
其他用法
- :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就可以找到, 無論有沒有被隔開
通配符選擇器
- 作用
- 給當前界面上所有的標簽設置屬性
- 格式
*{
屬性:值;
}
- 注意點:
- 由于通配符選擇器是設置界面上所有的標簽的屬性, 所以在設置之前會遍歷所有的標簽, 如果當前界面上的標簽比較多, 那么性能就會比較差, 所以在企業開發中一般不會使用通配符選擇器
