一.标签选择器
结构:标签名{ CSS属性名:属性值:}
作用:通过标签名,找到页面中所有这类标签,设置样式
注意点:
1.标签选择器选择的是一类标签,而不是单独某一个
2.标签选择器无论嵌套关系有多深,都能找到对应的标签
二.类选择器
结构:.类名{CSS属性名:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
注意点:
1.所有标签上都有class属性,class属性的属性值称为类名
2.类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
3.一个标签可以同时有多个类名,类名之间以空格隔开
4.类名可以重复,一个类选择器可以同时选中多个标签
三.id选择器
结构:#id属性值 {CSS属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意点:
1.所有标签上都有id属性
2.一个标签上只能有一个id属性值
3.一个标签上只能有一个id属性值
4.一个id选择器只能选中一个标签
四.通配符选择器
结构:*{CSS属性名:属性值;}
作用:找到页面中所有的标签,设置样式
注意点:
1.开发中使用极少,只会在极特殊情况下才会用到
五.复合选择器
1.后代选择器:空格
作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素
选择器语法:选择器1 选择器2 {CSS}
结果:
在选择器1所找到标签的后代中,找到满足选择器2的标签,设置样式
2.子代选择器:>
作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素
选择器语法:选择器1>选择器2{css}
结果:
在选择器1所找到标签的子代中,找到满足选择器2的标签,设置样式
六.并集选择器:
作用:同时选择多组标签,设置相同的样式
选择器语法:选择器1,选择器2{css}
结果:
找到选择器1和选择器2选中的标签,设置样式
注意点:
1.并集选择器中的每组选择器之间通过,分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.并集选择器中的每组选择器通常一行写一个,提高代码的可读性
七.交集选择器
作用:选中页面中 同时满足 多个选择器的标签
选择器语法:选择器1选择器2{CSS}
结果:
找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式
注意点:
1.交集选择器中的选择器之间是紧挨着的,没有东西分隔
2.交集选择器中如果有标签选择器,标签选择器必须写在最前面
8.hover伪类选择器
作用:选中鼠标悬停在元素上的状态,设置样式
选择器语法:选择器:hover{CSS}
注意点:伪类选择器选中的元素某种状态