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

您所在的位置:网站首页 类选择器的样式 标签选择器,类选择器,id选择器

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

2023-07-17 21:33| 来源: 网络整理| 查看: 265

选择器

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

选择器一共有3种

标签选择器类选择器 classid选择器 标签选择器

在这里插入图片描述

我们在body标签里面输入

h1标签 和一个p标签

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

在关键词里面输入h1{

}

然后我们浏览器打开一下

在这里插入图片描述

发现h1标签全部变成红色

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

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

类选择器

在这里插入图片描述

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

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

class可以等于任何值

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

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

就可以了

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

像上图那样

我们浏览器打开看一下

在这里插入图片描述

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

id选择器

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

在这里插入图片描述

像图片中这样书写

但是有一点要注意

在这里插入图片描述

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

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

选择器的优先级

在这里插入图片描述

我们给h1标签 赋上id 和class

然后标题2附上class

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

我们浏览器运行一下

在这里插入图片描述

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

第二个是class

第三第四 是标签选折起

很显然

id>class>标签选择器

id选择器的意义

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3