一. 元素(标签) 选择器
作用:根据指定标签名称,在当前界面找到所有该名称的标签,然后为其设置属性。
格式:标签名称{
属性:属性值;
}
注意点:只要是HTML中的标签,都可以作为标签选择器。
二. class选择器
作用:根据指定类名称,在当前界面找到所有该类名的标签,然后为其设置属性。
格式: .类名{
属性:属性值;
}
注意点:
1.每个HTML标签都有一个class属性
2.在同一个界面中的class名称是可以重复的
3.在编写类选择器之前必须添加一个小数点(英文状态下)
4.类名就是用来给某个或多个特定的标签设置样式的
5.在html中一个标签可以对应多个类名(命名规则:class="name1 name2 name3 ...")
三. id选择器
作用:根据指定id名称,在当前界面找到该id名的标签,然后为其设置属性。
格式: #id名{
属性:属性值;
}
注意点:
1.每个HTML标签都有一个id属性
2.在同一个界面中的id名称是不可以重复的
3.在编写id选择器之前必须添加一个#(英文状态下)
4.类名就是用来给某个特定的标签设置样式的
5.id名称不能是html标签的名称
6.在企业中一般id多用于js操作,在操作样式表中用的较少
四. 后代(包含)选择器
作用:在当前界面找到指定标签的所有后代标签中的特定的后代标签,然后为其设置属性。
格式: 指定标签名称 后代标签名称{
属性:属性值;
}
注意点:
1.后代选择器必须用空格隔开
2.后代不一定只是儿子,也包括孙子,重孙等,只要是指定标签下的后代标签中相同的标签都被选中
3.后代选择器不仅可使用标签名称构造选择器,也可将其他选择器结合使用
五. 群组选择器
作用:根据选择器名称,在当前界面找到这些的标签,然后为其设置属性。
格式: 选择器1 ,选择器2 ,...{
属性:属性值;
}
注意点:
1.当有多个选择器应用相同样式时
2.选择器之间必须用,(逗号)隔开
六. *通配符选择器
作用:给当前界面所有元素(标签)设置属性。
格式: *{
属性:属性值;
}
注意点:运用通配符选择器时,会遍历当前界面所有标签,当标签过多时,性能也会变差,企业中一般很少使用。
七. 伪类选择器
作用:根据指定选择器或标签名称后接伪类选择器,设置其链接状态属性。
格式:
1) a:link{属性:属性值;}
2) a:visited{属性:属性值;}
3) a:hover{属性:属性值;}
4) a:active{属性:属性值;}
注意点:
1.link表示设置鼠标链接初始状态的属性
2.visited表示设置鼠标链接浏览后状态的属性
3.hover表示设置鼠标链接悬停状态的属性
4.active表示设置鼠标链接激活状态的属性
5.除hover可给其他标签使用外,其余均只能用在超链接标签(a)上。
先归纳这六种,均为html+css布局中的常用选择器,有归纳的不合理的地方,读友们一定要提出评论哦。