html标签的分类 CSS的基本选择器使用

哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

第二阶段 CSS基本选择器

1 调试工具 使用

此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

按F12或者是 shift+ctrl+i"打开开发者工具。

或者右击网页空白处——查看

2 标签选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

3 类选择器

类选择器使用”.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名 {属性1：属性值1；属性2：属性值2；属性3：属性值3；}

标签调用的时候用c1ass=“类名”即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。下面是举个例子，实际工作中不要用中文。

4 CSS命名规范

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

2 不建议使用”_” 下划线来命名CS5选择器。

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

5 谷歌课堂案例

6 多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。两个甚至以上的类名比较常用

样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。

各个类名中间用空格隔开。

Class=”red ”

7 ID选择器

ID选择器使用“#”进行标识，后面紧跟ID名，其基本语法格式如下

#ID名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。（只能调用一次）

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

8 id选择器和类选择器的区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

总结：类选择器和id选择器的的区别就是在使用次数上。

9 通配符选择器

通配符选择器用*号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* {属性1：属性值1；属性2：属性值2；風性3：属性值3；}

这个通配符选择器，就像我们的电影明星中的梦中情人，想想它就好了，但是它不会和你过日子。所以这个选择器html标签的分类，我们认识就好了，平时工作很少用。

10 链接伪类选择器的使用

：link/*未访问的链接*/

：/*已访问的链接*/很少用到

：hover/*鼠标移动到链接上*/

：actⅳe/*选定的链接当我们点击别松开鼠标显示的状态*/很少用到

注意写的时候，他们的顺序不要颠倒，按照L V H A的顺序。 love hate爱上了讨厌记忆法或者lv包包非常hao

11 链接伪类的简写方式

实际工作，我们简单写链接伪元素选择器就好了

12 结构伪类选择器（一）

结构（位置）伪类选择器（CSS3）

1 :first-child：选取属于其父元素的首个子元素的指定选择器

2 :last-child：选取属于其父元素的最后一个子元素的指定选择器

3 :nth-child（n）：匹配属于其父元素的第N个子元素，不论元素的类型even偶数odd奇数n从0开始

13 结构伪类选择器（二）

2n就是 0 2 4 6 ……项

3n就是 0 3 6 9 ……项

14 结构伪类选择器（三）

4 :nth-last-child（n）：选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式

15 目标伪类选择器

:目标伪类选择器选择器,可用于选取当前活动的目标元素,例如百度百科里的目录，点一下就可以跳转到目标信息，:可以使目标信息赋予属性html标签的分类，字体颜色大小等。

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《04 CSS外观样式及应用》小伙伴们不要错过哟！

​