CSS選擇器(元素+class+id+後代+子元素+相鄰+屬性+選擇器分組)

目錄

1.元素選擇器( p{  ...; ...;  })

2.class選擇器(  .Name { ...; ...;  } )(類型選擇器)-最常見最容易理解

3.id選擇器 （ #Name {  ...; ...;  }  ）

4.後代選擇器（  .father .baby { ...;   ;}  ）

5.子元素選擇器 （ div > span ）

6.相鄰選擇器（相鄰兄弟元素）：選中對應元素的下一個兄弟元素

7.屬性選擇器（ img[alt] ）

*. 選擇器分組

---

1.元素選擇器( p{  ...; ...;  })

對已選中的HTML元素符號設置CSS樣式

div、 p、 a 、ul 、li等

 

基本格式：

div {
   height:80px;
   width:80px;
}

1.div: 元素符號

2.width、height : 屬性

3.80px : 屬性值

2.class選擇器(  .Name { ...; ...;  } )(類型選擇器)-最常見最容易理解

綁定HTML元素上已經設置的class標籤進行設置對應的css樣式。

基本格式：以class前綴符+class名稱： .Name {} 

/*功能：選擇頁面上class屬性爲Nihao的元素： */
.Nihao {
  weight:80px;
  height:80px;
}

3.id選擇器 （ #Name {  ...; ...;  }  ）

該選擇器通過綁定HTML元素上已經設置的唯一id標籤進行設置對應的CSS樣式。

基本格式：id選擇符前綴#+id名稱  #Name{  ...; ...;  }

#Nihao {
  height:80px;
  weight:80px;
}

4.後代選擇器（  .father .baby { ...;   ;}  ）

選中某幾個父級對應的所有子級元素，並針對該子級設置CSS樣式。

三點特性：

1. 後代選擇器設置的CSS樣式不會影響到父級
2. 父級和子級之間可以存在多層級父級，並不侷限在單一父子級之間，層級越深所設置的CSS樣式優先級越高，從左到右逐級深入
3. 父級和子級之間用空格隔開

.father .baby {
  color:red;
}

5.子元素選擇器 （ div > span ）

與後代選擇器較爲類似，但是範圍比後代選擇器小。

兩點特性：

1. 後代選擇器可以跨層級影響，而子元素選擇器要求父元素和子元素一定爲上下級關係，中間如果間隔其他元素，則會失效
2. 父元素和子元素之間需要用 子結合符號（>） 隔開。

div > span {
 weight:80px;
 heigth:80px;
}

6.相鄰選擇器（相鄰兄弟元素）：選中對應元素的下一個兄弟元素

三點特性：

1. 所涉及相鄰兄弟元素必須是該元素的同級元素
2. 所涉及的相鄰兄弟元素必須是相鄰的兄弟元素，中間如果有其他元素隔開的會導致失效
3. 元素A對應的相鄰兄弟元素之間需要 + 隔開

#Nihao + div {
 weight:80px;
 height:80px;
}

7.屬性選擇器（ img[alt] ）

檢查HTML元素頁面中符合所設置的屬性條件的元素

通過   [ ] 設置被選元素的屬性條件

具體內容將通過一整篇文章並結合代碼進行展示。

具體請見此文：https://blog.csdn.net/QQQZSJ/article/details/104735799

*. 選擇器分組

就是有多個元素需要使用同一套CSS樣式，可以使用選擇器分組，以避免爲每個元素單獨設置樣式而造成不必要的冗餘。

選擇器分組通過逗號將服用同一套樣式的多個元素進行分隔

/***選擇器分組寫法***/
a,p,div{
    color:red;
}

/***原始寫法***/
a{color:red}
p{color:red}
div{color:red}

/*copy from  W3Cschool*/