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.youkuaiyun.com/QQQZSJ/article/details/104735799

*. 选择器分组

就是有多个元素需要使用同一套CSS样式，可以使用选择器分组，以避免为每个元素单独设置样式而造成不必要的冗余。

选择器分组通过逗号将服用同一套样式的多个元素进行分隔

/***选择器分组写法***/
a,p,div{
    color:red;
}

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

/*copy from  W3Cschool*/