CSS选择器（重点）

学习目标

• 理解
  • 能说出选择器的作用
  • ID选择器和类选择器的区别
• 应用
  • 能够使用基础选择器给页面添加元素

举例说明（游戏选择人物）

0. div

• 定义
  • 标签可以把文档分割为独立的、不同的部分。

• 用法

  • 是一个块级元素。
  • 可以通过
    的 class 或 id 添加额外的样式。

    <div class="pink">Hello word</div>

• 总结

  • 划分页面布局，分割常用标签

    1. 选择器的作用

• 什么是选择器

  • 选择标签用的，把我们想设置的标签选择出来

    <style>
       div{
           width: 100;
           height: 100;
           background-color: blue;
           color: white;
       }
    </style>

    <div>Hello word</div>

• 选择器分为：

  • 基础选择器
  • 复合选择器

2. CSS基础选择器

2.1 标签选择器

• 概念：
  • 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

• 语法：

  标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

• 作用：

  • 标签选择器可以把某一个类标签全部选择出来，
• 优点：
  • 快速为页面中同类型的标签统一格式
• 缺点：
  • 不能设计差异化样式

2.2 类选择器

• 类选择器的使用
  • “ . “ 英文点进行标识，后面紧接着类名

• 语法：

  • 类名选择器

    .类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
    }

  • 标签

    <p class='类名'></p>

• 优点：

  • 可以为元素对象定义单独或相同的样式，可以选择一个或者多个标签
• 注意：
  • 类选择器使用. 点进行标识，后面紧跟着类名
  • 长名称或词组可以使用中横线来为选择器命名
  • 不要纯数字、中文等命名，尽量使用英文字母来表示

案例：通过选择器设置字母的颜色和大小（Baidu,sougou,xiaomi等等）

2.3 特殊用法 - 多类名

• 顾名思义：他有多个名称，跟你有小名一样
• 注意：
  • 多个类名之间用空格隔开
  • 多类名选择器在后期比较复杂的情况下，使用较多

    <div class="pink font text ">Hello word</div>

2.4 id选择器

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

• 其基本语法格式如下：

  • id选择器

    #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  • 标签

    <p id="id名"></p>

• 元素的id值是唯一的，只能对应于文档中某一个具体的元素。

• 用法基本和类选择器相同。

  2.5 id选择器和类选择器区别

• W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

  • 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
  • id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。

总结

• 类选择器我们在修改样式中，用的最多。
• id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript 搭配使用。

2.6 通配符选择器

• 概念
  • 通配符选择器用*号表示，* 就是选择所有标签，所作用的范围最广，能匹配页面中所有的元素
  • 基础语法 ```html

• { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。css
• { margin: 0; / 定义外边距/ padding: 0; / 定义内边距/ } ```

2.7 基础选择器总结

常用选择器 - 类选择器

2.8 团队约定

选择器

• 尽量少用通用选择器 *
• 尽量少用 ID 选择器
• 不使用无具体语义定义的标签选择器 div span