哈喽,各位小伙伴,我们会更新一些前端的文章,想学习前端的小伙伴,特别是0基础的小伙伴,或者对此感兴趣的小伙伴,可以关注我,我会保持更新。
选择器:
1.类选择器:
语法:
HTML:<div class="box"></div>
CSS:.box{样式}
多个标签可以公用一个类名
一个标签可以有多个类名,不同类名之间用空格隔开
优点:能够匹配不同类型的标签
缺点:匹配范围有点广
2.ID选择器:
语法:
HTML:<div id="bobo"></div>
CSS:#bobo{样式}
一个标签只有一个ID名
ID选择器的取值只能出现一次
优点:可以精准定位到具体的元素
思考,不同选择器修饰同一个标签,样式会如何显示?
标签选择器 类选择器 类选择器样式生效
类选择器 ID选择器 ID选择器样式生效
标签选择器 ID选择器 ID选择器样式生效
通配符选择器权重:0
标签选择器权重:1
类选择器权重:10
ID选择器权重:100
行内样式权重:1000
!important>行内选择器>id选择器>类选择器>标签选择器>通配符选择器
选择器权重不同,修饰同一标签,相同的属性被覆盖(权重高d的生效),不同的属性被保留
选择器权重相同。修饰同一标签,后面代码覆盖前面代码(相同属性被覆盖掉),不同属性被保留
3.群组选择器:
语法:选择器1,选择器2,选择器3{样式}
多个选择器公用一组样式
4.关系选择器(后代选择器)
通过某种关系去查找到指定的某一个标签或者某一类标签
1.子代选择器:(类似父子关系)
符号:>
2.后代关系选择器:(类似爷孙关系,能够找到当前元素包含的指定的标签)
符号:空格
5.超链接动态伪类选择器(主要用在超链接上)
:link------访问前
:visited-----访问后
:hover-----鼠标滑过(常用)
:active----鼠标激活瞬间(鼠标点下去,没送开的状态)