CSS选择器使用基本流程:
1.制作所需要的选择器,并在其中写入样式
2.将选择器绑定到指定的html标签上
通用选择器
书写格式:*{ }
其优先级是选择器中最低的,它可以修改整个页面,所有标签样式,包括body,html
代码:
显示效果:
标签选择器
用标签名来定义,将当前页面所有与名字相同的标签都绑定上样式
优先级低于class选择器
代码:
显示效果:
class选择器
class选择器用" . "来标识自身
自定义名称(可以用数字,字母,下划线,但是不能以数字开头)
可以给多个标签使用,可以给指定的标签绑定,优先级高于标签选择器
代码:
显示效果:
id选择器
id选择器用" # "来标识自身,命名规则与class选择器相同
优先级高于class选择器
不具有重用性,具有唯一性,如果多个标签使用,会造成不可预知的错误
禁止重复使用同一个id
群组选择器
只能用于大批量的样式,如果需要给个别的标签写样式,请使用class或id选择器
代码:
显示效果:
子代选择器
语法:父级>子级{ 样式 }
对指定父级下指定的子级进行修改
代码:
显示效果:
后代选择器
语法:父级 空格 子级 { }
父级 子级{ }
对指定父级下的所有元素进行操作
代码:
显示效果:
交叉选择器
需要同时满足两个条件
div.box选择的是标签是div,class名为box的元素
或者说是class名为box的div标签
交叉选择器中没有空格
代码:
显示效果:
鼠标伪类hover
效果:在鼠标移入该元素时,触发指定效果,移出时回到初始样式
语法:XXX:hover{ }
冒号前是触发者,冒号之后是显示者
使用hover时,子代、后代选择器写在hover之后XXX:hover>XX{ }
代码:
显示效果:鼠标移入前
鼠标移入后
transition过渡
transition是复合属性
transition:值1 值2;
值1:需要修改的样式
值2:改变所用的时间,单位为s