标签选择器，类选择器，id选择器

最新推荐文章于 2024-09-04 20:25:56 发布
最新推荐文章于 2024-09-04 20:25:56 发布
阅读量2.7k 收藏 5
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyzuiyou/article/details/116308951
版权
本文详细解释了HTML、CSS中的标签选择器、类选择器(id)和它们的优先级。了解如何使用id选择器修改特定元素，类选择器的跨元素应用，以及标签选择器的通用性。通过实例演示，学习id选择器的独占性和优先级规则：id > class > 标签选择器。
摘要由CSDN通过智能技术生成

选择器

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

选择器一共有3种

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

标签选择器

在这里插入图片描述

我们在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选择器存在的意义就是，来修改被标签选择器所选择的标签元素

XY最右
关注
6—CSS基础选择器（标签选择器、类选择器、id选择器）
qq_64073631的博客
10-21 2572
6—CSS基础选择器（标签选择器、类选择器、id选择器）
类选择器和ID选择器的区别
热门推荐
笔记别偷看
12-24 1万+
区别 1： 与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。 下面代码是正确的： <p> 三年级时，我还是一个 <span class="stress">胆小如鼠</span> 的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个 <span class="stress">勇气</span> 来回答老师提出的问题。 </p> 而下面代码是错误的： <p> 三年级时，我还
id选择器
weixin_30564901的博客
11-13 104
概述根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义。参见示例。参数idStringV1.0用于搜索的，通过元素的 id 属性中给定的值示例描述:查找 ID 为"myDiv"的元素。HTML 代码:<div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id=...
3.1 CSS标签选择器
最新发布
Python老吕的博客
09-04 1034
通过合理使用这些组合选择器，开发者可以创建出精确和高效的样式规则，从而实现更复杂和灵活的页面布局和设计。标签选择器与其他选择器的组合使用是CSS中常见的方法，它可以帮助开发者创建更精确的样式规则，以适应复杂的布局和设计需求。标签选择器是CSS中最基本的选择器之一，它根据HTML元素的标签名来选择元素。通过理解和应用这些最佳实践，开发者可以更有效地使用标签选择器，同时避免它们的局限性，从而创建出更加清晰、高效和可维护的CSS代码。标签选择器是CSS中最基本的选择器之一，它根据HTML元素的类型来选择元素。
CSS 标签选择器 类选择器 id选择器 通配符选择器 总结
刘洋的博客
02-21 679
CSS可以直接写在HTML标签里面,这样的写法叫行内样式法: ⬇️这样就是一个标签上单独➕一个css修饰 <body> <h1 style="color: pink; font-size: 28px;"> 冲冲冲</h1> </body> 简单的分离: ⬇️实现简单的分离, 对各个标签进行操作, ⚠️一定要写在head标签里面 但是只能适用于...
css选择器
weixin_52148546的博客
11-17 171
标签选择器 标签选择器：可以选出所有相同的标签 特点：不能差异化选择 div{color:ref} 类选择器 类选择器：可以选出一个或者多个标签 特点：根据需求选择 HTML文件中：<p class="nav">类选择器</p> css文件中：.nav{clolr:red} 样式点定义结构类调用一个或多个开发最常用 ID选择器 ID选择器：一次只能选择一个 标签 特点：每个HTML文档中的ID是唯一的，只出现一次 HTML文件中：<p id="nav1">ID选择器&lt
基础选择器汇总——标签选择器，类选择器、id选择器、通配符选择器
周百万的博客
09-05 5282
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中标签指定统一的 CSS 样式。在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）其中权重不能直接说成 1、10、100这样，但可以这样理解，这样理解更方便！如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。复合选择器和属性选择器请参考我写的其他文章！
5.CSS-标签选择器、id选择器和类选择器
Veronnit的博客
07-12 2498
文章目录标签选择器作用格式注意点id选择器作用格式注意点类选择器作用格式注意点id和class的区别id选择器和class选择器的区别 标签选择器 作用 根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性。 格式 标签名称{ 属性：值； } 注意点 1.标签选择器选中的是当前界面中的所有的标签，而不能单独选中一个标签； 2.标签选择器无论标签藏得多深都能被选中； 3.只要是HTML中的标签就可以作为标签选择器。 id选择器 作用 根据指定的id名称找到对应的标签，然后设置属性。 格式 #
CSS - 选择器(标签选择器、类选择器、ID选择器)
陆讯
04-27 1万+
标题&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&q
类选择器和id选择器
xiaoxing1213的博客
11-17 1579
哈喽????！大家好，今天我带来了类选择器和id选择器的区别和写法。 1.首先先写上P标签，在p标签里面写上字。 2.然后随便选2个p标签写上 class=” ” 然后在帮他们写上名字（在class=” ”里面写） 3.然后写上你们想要的样式。 4. id选择器 跟上面的一样先写p标签。 5.写上 id=” ” 然后再写上你想要的样式。（id记得写上名字） 6.类选择器和id选择器的区别是什么？ 答：类选择器的命名是可以重复的， id选择器的命名是不能的。 就好比是id
标签选择器、类选择器、ID选择器、通配符选择器（CSS选择器）
qq_50455637的博客
08-01 1449
标签选择器、类选择器、ID选择器、通配符选择器
11选择器（id选择器，类选择器，标签选择器）
IT小多的博客
09-05 3580
1、id选择器 #box{ } #box{ ................. } 特点：每一个标签只能有一个ID。 2、类选择器 .类名{ } .box{width: 100px;height: 100px;background: blue} .box2{border:5px solid red;}
ID选择器
Liyunhao_haoge的博客
10-04 2115
ID选择器 语法: #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......} 标签调用的时候用： id = "id名" 类选择器与ID选择器的区别:类选择是可以重复多次使用的,id只能使用一次. 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="...
每日知识总结
m0_73801853的博客
09-19 327
thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody。每个表格均有若干行（由`tr`标签定义），每行被分割为若干单元格（由`td `标签定义）。**注意**：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。现在，用于显示、展示数据。CSS中的注释以"注释以`/*`开头，以`*/`结尾,开始和结束中间为注释内容。- 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。
CSS选择器详解：类型、ID、类与标签选择器
此外，还有ID选择器（以`#`标识，如`#demoDiv`）和类选择器（以`.`标识，如`.demoDiv`）。 - ID选择器：使用ID选择器可以定位到具有特定ID的唯一元素，例如`#demoDiv`将应用于ID为`demoDiv`的元素。 - 类选择...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值