夯实基础--CSS=> 基础选择器

Posted °PJ想做前端攻城狮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了夯实基础--CSS=> 基础选择器相关的知识,希望对你有一定的参考价值。

CSS基础选择器

CSS选择器作用

找到指定的html页面元素,选择标签。

CSS基础选择器

「1. 标签选择器」

  • 标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
  • 作用:可以把某一类标签全部选择出来。
  • 优点:快速为网页中同类型的标签统一样式
  • 缺点:不能设计差异化样式。
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 

「2. 类选择器」

  • 类选择器使用"."(英文点号)进行标识,后面紧跟类名。
  • 语法:类名选择器
.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}
<p class='类名'></p>
  • 优点:可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签

  • 注意:类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)

    • 长名称或词组可以使用中横线来为选择器命名。
    • 不要纯数字、中文等命名, 尽量使用英文字母来表示。
    • 多类名选择器:各个类名中间用空格隔开

「3. id选择器」

id选择器使用#进行标识,后面紧跟id名

  • 元素的id值是唯一的,只能对应于文档中某一个具体的元素。
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名"></p>

「4. 通配符选择器」

通配符选择器用*号表示,* 就是选择所有的标签。它是所有选择器中作用范围最广的,能匹配页面中所有的元素。

  • 注意:会匹配页面所有的元素,降低页面响应速度,不建议随便使用
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

「5. 基础选择器总结」

选择器作用缺点使用情况用法
标签选择器可以选出所有相同的标签,比如p不能差异化选择较多p { color:red;}
类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav { color: red; }
id选择器一次只能选择器1个标签只能使用一次不推荐使用#nav {color: red;}
通配符选择器选择所有的标签选择的太多,有部分不需要不推荐使用* {color: red;}

「6. 团队约定-选择器」

  1. 尽量少用通配符选择器 *
  2. 尽量少用ID选择器
  3. 不使用无具体语义定义的标签选择器。
/* 推荐 */
.jdc {}
li {}
p{}

/* 不推荐 */
*{}
#jdc {}
div{}   因为div 没有语义,我们尽量少用

以上是关于夯实基础--CSS=> 基础选择器的主要内容,如果未能解决你的问题,请参考以下文章

CCS选择器基础

夯实基础--CSS => CSS三大特性

VSCode自定义代码片段——CSS选择器

夯实基础--CSS=> 背景(background)

VSCode自定义代码片段6——CSS选择器

夯实基础--CSS=>浮动(float)