CSS符合選擇器-有解無憂

CSS復合選擇器

后代選擇器
- 后代選擇器又稱為包含選擇器，可以選擇父元素里面的子元素，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，當標簽發生嵌套時，內層標簽就成為外層標簽的后代
- ```
元素1 元素2 {樣式宣告}
```
- 【注意】
  - 元素1 和元素2 中間用空格隔開
  - 元素1是父級，元素2是子級，最終選擇的是元素2
  - 元素2可以是兒子，也可以是孫子，只要元素1的后代即可
子選擇器
- 子元素選擇器（子選擇器）只能選擇作為某元素的最近一級子元素，簡單理解就是選親兒子元素
- ```
元素1 > 元素2 {樣式宣告}
```
- 【注意】
  - 元素1和元素2 中間用大于號隔開
  - 元素1 是父級，元素2 是子級，最終選擇的是元素2
  - 元素2 必須是親兒子，其孫子、重孫之類都不歸他管
并集選擇器
- 并集選擇器可以選擇多組標簽，同時為他們定義相同的樣式，通常用于集體宣告
- 并集選擇器是各種選擇器通過英文逗號（，）鏈接而成，任何形式的選擇器都可以作為并集選擇器的一部分
- ```
元素1，元素2{樣式宣告}
```
- 【注意】
  - 元素1和元素2中間用逗號隔開
  - 逗號可以理解為和的意思
  - 畢竟選擇器通常用于集體宣告
偽類選擇器
- 偽類選擇器用于想某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或則選擇第一個，第n個元素
- 偽類選擇器書寫最大的特點是用冒號（：）表示，比如：hover、：first-child
- 鏈接偽類選擇器
  - ```
  a:link  /* 選擇所有未被訪問的鏈接*/
  a:visited /* 選擇所有已被訪問的鏈接*/
  a:hover /*選擇滑鼠指標位于其上的鏈接*/
  a:active /*選擇活動鏈接（滑鼠按下未彈起的鏈接）*/
```
偽類選擇器注意事項
- 為了確保生效，請按照LAHA的回圈順序宣告 :link :visited :hover :active
- a標簽在瀏覽器中具有默認樣式，所以我們實際作業中都需要給鏈接單獨指定樣式

鏈接偽類選擇器

a{
  color：red；
}
a：hover{
   coloe：gray； /* 滑鼠經過的時候，原來的紅色 變成 灰色 *  /
}

：focus偽類選擇器
- ：focus偽類選擇器用于選取獲得焦點的表單元素
- 焦點就是游標，一般情況<input> 類表單元素才能獲取，因此這個選擇器也主要針對于表單元素來說
- ```
inpt：focus{
  background-color：yellow；
}
```

選擇器	作用	特征	使用情況	隔開符號及用法
后代選擇器	用來選擇后代元素	可以是子孫后代	較多	符號是空格
子代選擇器	選擇最近的一級元素	只選親兒子	較少	符號是大于
并集選擇器	選擇某些相同樣式的元素	可以用于集體宣告	較多	符號是逗號
鏈接偽類選擇器	選擇不同狀態的鏈接	跟連接相關	較多	重點a{}和a:hover{}
:focus選擇器	選擇獲得游標的表單	跟表單相關	較少	input：focus

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/111840.html

標籤：Html/Css

上一篇：Emmet語法

下一篇：css3 影片