10-CSS基礎-CSS選擇器

CSS選擇器

標籤選擇器

• 什麼是標籤選擇器?
• 作用: 根據指定的標籤名稱, 在當前介面中找到所有該名稱的標籤, 然後設定屬性
• 格式:

標籤名稱{

    屬性:值;

}

• 注意點:
• 標籤選擇器選中的是當前介面中所有的標籤, 而不能單獨選中某一個標籤
• 標籤選擇器無論標籤藏得多深都能選中

id選擇器

• 什麼是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 para2">

錯誤的寫法:

<p class="para1" class="para2">

id選擇器和類選擇器

• id和class的區別?
• 1.1
  id相當於人的身份證不可以重複
  class相當於人的名稱可以重複
• 1.2
  一個HTML標籤只能繫結一個id名稱
  一個HTML標籤可以繫結多個class名稱
• id選擇器和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就可以找到, 無論有沒有被隔開

萬用字元選擇器

• 什麼是萬用字元選擇器?
• 作用: 給當前介面上所有的標籤設定屬性
• 格式:

*{

    屬性:值;

}

• 注意點:
• 由於萬用字元選擇器是設定介面上所有的標籤的屬性, 所以在設定之前會遍歷所有的標籤, 如果當前介面上的標籤比較多, 那麼效能就會比較差, 所以在企業開發中一般不會使用萬用字元選擇器