基础选择器
1.1 标签选择器
-
概念:
标签选择器(元素选择器)是指HTML中标签名称作为选择器,按标签名称分类,为页面之中某类标签指定的统一CSS样式。 -
语法:
标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;属性4:属性值4;}
- 作用:
标签选择器 可以把某一类标签全部选择出来 - 优点:
能够快速为页面中间类型的标签统一样式 - 缺点:
不能设计差异化样式
1.2 类选择器
- 语法
<!-- 标签 -->
<p class="类名">内容</p>
/*类名选择器*/
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
属性4:属性值4;
}
-
优点:
可以为元素对象定义单独胡总和相同的样式。可以选择一个或者多个标签 -
注意:
类选择器用(英文状态下)".",后面跟类名
长名称或者词组可以用中横线来命名
不能以纯数字、中文命名(也不可以使用数字做类名开头),尽量使用英文字母
如需查看完整命名规范点击如下链接跳转
css选择器命名规范 -
扩展:
多类名
<p class="类名1 类名2 类名3">内容</p>
1.3 id选择器
- 语法:
<!-- 标签 -->
<p class="id名">内容</p>
/*id选择器*/
#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
属性4:属性值4;
}
- 注意:
id选择器用#进行标识,后面跟id名
元素id值是唯一的,只能对应文档中某一个元素
1.4 通配符选择器
-
概念:
通配符选择器用*号表示,*就是选择所有的标签,他是所有选择器中作用范围最广的、能匹配页面中所有的元素。 -
语法:
/*通配符选择器*/
*{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
属性4:属性值4;
}
- 注意:
会匹配到页面所有元素,会降低页面响应速度,不建议随便使用
1.5 总结
- 尽量少使用通配符选择器
- 尽量少使用id选择器
- 不适用无具体语义定义的标签选择器