Web前端入门（十）CSS基础选择器

总目录

1.标签选择器

• 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
• 作用：可以把某一类标签全部选择出来。
• 优点：快速为网页中同类型的标签统一样式
• 缺点：不能设计差异化样式。

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
/* 如下所示 */
li {
    font-size: 36px;
}

2.类选择器

• 类选择器使用"."(英文点号)进行标识，后面紧跟类名。

• 优点：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

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

• 长名称或词组可以使用中横线来为选择器命名。

• 不要纯数字、中文等命名， 尽量使用英文字母来表示。

• 多类名选择器：在标签的class属性中可以写多个类名，各个类名中间用空格隔开，这个标签就可以分别具有这些类名的样式。

• .类名  {   
      属性1:属性值1; 
      属性2:属性值2; 
      属性3:属性值3;     
  }
  /* 如下所示 */
  <div class="类名"></div>
  

多类名开发中使用场景：

1. 可以把一些标签元素相同的样式(公共的部分)放到一个类里面
2. 这些标签都可以调用这个公共的类，然后再调用标签独有的类
3. 从而防止代码堆积，造成冗杂情况

3.id选择器

• id选择器可以为标有特定 id 的 HTML 元素指定特定的样式
• 元素的id值是唯一的，只能对应于文档中某一个具体的元素
• HTML 元素以 id属性 来设置 id 选择器，CSS中 id 选择器 以 “#” 来定义

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
/* 如下所示 */
#onetest {
    font-size:36px;
}

<div id="onetest">
    OneTest
</div>

注：多个标签可以有同一个类，而id却是唯一的，不允许重复，故而id选择器一般是唯一的。

4.通配符选择器

• CSS 中， 通配符使用 * 定义，它表示选取页面中所有元素(标签)。

* {
    属性1：属性值1;
}

• 通配符选择器不需要调用，自动就给所有的元素使用样式
• 一般是用于清楚元素标签的内外边距

* {
    margin: 0;
    padding: 0;
}

5.基础选择器总结

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	ID 属性只能在每个 HTML 文档中出现一次	一般和 js 搭配	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color: red;}