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