标签选择器,类选择器,id选择器

选择器

作用:就是选择代码中某一个或者某一类的元素,给他进行 声明

选择器一共有3种

  1. 标签选择器
  2. 类选择器 class
  3. id选择器

标签选择器

标签选择器,类选择器,id选择器

我们在body标签里面输入

h1标签 和一个p标签

然后在head标签里面输入style关键词

在关键词里面输入h1{

}

然后我们浏览器打开一下

标签选择器,类选择器,id选择器

发现h1标签全部变成红色

标签选择器:会选择页面上所有这个标签的元素

但是有时候我们要给同一个元素的标签给予他另外一种元素是,我们可以使用类选择器来操作

类选择器

标签选择器,类选择器,id选择器

类选择器比标签选择器多了一个class

在body标签里面的h1标签里面输入 class

class可以等于任何值

然后在head里面输入style标签 在里面 先输入一个.

在输入class的名称 再加上一个{}

就可以了

class类标签也可以跨元素操作

像上图那样

我们浏览器打开看一下

标签选择器,类选择器,id选择器

就发现标题1 标题3 以及副标题都是同一个颜色

id选择器

除了有类选择器外,还有一个id选择器

标签选择器,类选择器,id选择器

像图片中这样书写

但是有一点要注意

标签选择器,类选择器,id选择器

id不能同样,只能属性唯一

也就是说,这个页面里面的id的值只能存在一个,不能存在多个

选择器的优先级

标签选择器,类选择器,id选择器

我们给h1标签 赋上id 和class

然后标题2附上class

表题3用标签选择器,看看最后结果是什么颜色

我们浏览器运行一下

标签选择器,类选择器,id选择器

就会发现 第一个是id选择器

第二个是class

第三第四 是标签选折起

很显然

id>class>标签选择器

id选择器的意义

所以id选择器存在的意义就是,来修改被标签选择器所选择的标签元素

上一篇:使用plotly画出堆叠的3D图形


下一篇:测试Thread中的常用方法