目录
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样式。
三点特性:
- 后代选择器设置的CSS样式不会影响到父级
- 父级和子级之间可以存在多层级父级,并不局限在单一父子级之间,层级越深所设置的CSS样式优先级越高,从左到右逐级深入
- 父级和子级之间用空格隔开
.father .baby {
color:red;
}
5.子元素选择器 ( div > span )
与后代选择器较为类似,但是范围比后代选择器小。
两点特性:
- 后代选择器可以跨层级影响,而子元素选择器要求父元素和子元素一定为上下级关系,中间如果间隔其他元素,则会失效
- 父元素和子元素之间需要用 子结合符号(>) 隔开。
div > span {
weight:80px;
heigth:80px;
}
6.相邻选择器(相邻兄弟元素):选中对应元素的下一个兄弟元素
三点特性:
- 所涉及相邻兄弟元素必须是该元素的同级元素
- 所涉及的相邻兄弟元素必须是相邻的兄弟元素,中间如果有其他元素隔开的会导致失效
- 元素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*/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)