id jquery选择器 开头_HTML的id选择器类选择器

7451e228c049a13b30f5d50ce3ba8284.png

一、问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式

二、id选择器

1.定义:根据指定的id名称找到对应的标签,然后设置属性

2.格式:

id名称{

 属性:值;

3.例如:

迟到毁一生

早退穷三代

按时上下班

必成高富帅

efd51baf5ce0589a1ff267a364503dd0.png

4.注意:

(1)每个HTML标签中都有一个属性叫做id ,也就是说每个标签都可以设置id

(2)在同一个界面中id名称是不可以重复的

(3)在编写id选择器的时候一定要在id名称前面加上#

(4)id名称是有规范的:只能由字母、数字、下划线组成的,且不能以数字开头;id名称不能以HTML标签名来命名

(5)在企业开发中一般情况下如果仅仅是为了设置样式,我们一般不会使用id,因为在前端开发中id是留给js使用的,可以使用类选择器

三、类选择器

1.定义:根据指定的类名称找到对应的标签,然后进行设置属性

2.格式:

(1)写在HTML中的与id的格式是一致的

(2)在style中:

.类名{

​ ​属性​:值;

​3.例子:

 

迟到毁一生

早退穷三代

按时上下班

必成高富帅

a3a6d3ce04ab329024c75c7339a58cea.png

4.注意点:

(1)每个HTML标签中都有一个属性叫做class ,也就是说每个标签都可以设置class

(2)在同一个界面中class名称是可以重复的

(3)在编写class选择器的时候一定要在class名称前面加上.

(4)class名称是有规范的:只能由字母、数字、下划线组成的,且不能以数字开头;class名称不能以HTML标签名来命名(和id的命名规范一样)

(5)使用类选择器就是为了设置样式的

(6)在HTML中每个标签可以同时绑定多个类名

格式​:

例如:

 .ppp{ font-size: 50px; } .pppp{ color:red; } .ppppp{ font-family: 微软雅黑; }​.......(省略中间的)

实验一下

fbf551dd72a46c5254a83f6ffbc44c85.png

多个类名​控制不同的属性。

点击【右上角,关注 子瑜说IT 】持续更新IT资讯以及web前端开发教学

8年开发老码农福利赠送:网页制作,网站开发,web前端开发,从最零基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移动端小程序项目实战【视频+工具+系统路线图】都有整理,送给每一位对编程感兴趣的小伙伴

获取方式:

右上角有私信,请私信发我:01 即可获取!

ffbde0f064a4cfb71c0559b36e540fc6.png
c07ce2205cb09b2db75bb3385baf3b55.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429156.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MBR分析

主引导记录(Master Boot Record,缩写:MBR),又叫做主引导扇区,是计算机开机后访问硬盘时所必须要读取的首个扇区,它在硬盘上的三维地址为(柱面,磁头,扇区&…

八、java中常见API及java异常处理

1.包装类 1.1 基本类型包装类(记忆) 基本类型包装类的作用 将基本数据类型封装成对象的好处在于可以在对象中定义更多的功能方法操作该数据 常用的操作之一:用于基本数据类型与字符串之间的转换 基本类型对应的包装类 基本数据类型包装类by…

弹出并点击弹框关闭 自定义toast_关于别名配置使用弹框交互应用的思考

温馨提示如果你喜欢本文,请帮助我将这篇文章分享到朋友圈,喜欢我的文章,可以关注我,我们一起交流。本文:2052字 | 估计阅读:6分钟我在思考功能实现需求的时候,会斟酌和判断使用什么样的功能和交…

POJ 1189 钉子和小球

题目链接&#xff1a;http://poj.org/problem?id1189 dp 可以知道一共有2^n条路径&#xff0c;则设顶点有2^n个球&#xff0c;若当前为*则向左右的球各有一半&#xff1b;若为.&#xff0c;则球全部掉入正下方。 1 #include<iostream>2 #include<cstring>3 #inclu…

MySQL学习笔记(总结)

一、MySQL课程内容 对应视频教程&#xff1a;千锋教育JavaWeb基础入门到实战教程&#xff0c;javaSE基础进阶java web快速入门教程完整版_哔哩哔哩_bilibili 1.1 数据库介绍 数据库概念术语介绍 1.2 MySQL数据库 下载、安装、配置、卸载MySQL客户端工具的安装及使用 1.3 …

按群计数10以内_【乐玩乐学】有趣的计数活动

_有趣的计数活动写给爸爸妈妈的话&#xff1a;时间、日期、体重、地址世界上到处都是各种各样的数字。有了数字我们的交流才变得更加通畅。但是在这些方便的数字出现之前&#xff0c;生活在很久很久以前的人们是怎么数数、怎么表示数量的呢&#xff1f;他们用的就是手、脚等身体…

移动端弹出层加遮罩后禁止滑动

//实现滚动条无法滚动 var mofunction(e){e.preventDefault();};/***禁止滑动***/ function stop(){document.body.style.overflowhidden; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }/***取消滑动限制***/ function move(){document.…

数据结构学习笔记总结(部分内容后续会更新)

第一章 绪论 1.1 数据结构的研究内容 1.2 基本概念和术语 1.2.1 数据、数据元素、数据项和数据对象 1.数据 数据&#xff1a;是能够输入计算机且能被计算机处理的各种符号的集合 信息的载体是对客观事物符号化的表示能够被计算机识别、存储和加工 包括&#xff1a; 数值型的…

php链式调用(链式操作)

2017年6月28日 10:41:19 星期三 情景: 在多次处理数组的时候, 要自定义好多个临时变量, 起名字特别麻烦 于是, 就想到利用PHP的 1.魔法方法__call 2.不定参数, 参数自动解包的特性 写了一个简单的链式操作类: 调用举例: 1 $arr [2 [id > 1, name >111],3 [id &g…

git 怎么拉去分支代码_Git使用技巧1——代码写错分支了怎么办?

工欲善其事&#xff0c;必先利其器。前言Git的本质git是一个版本控制工具&#xff0c;一切以版本控制为中心&#xff0c;版本即每一次commit&#xff0c;其实分支是指向commit的&#xff0c;HEAD也是指向某一次提交的&#xff0c;HEAD其实指向的就是当前分支的最近一次commit&a…

一、MySQL基础

MySQL基础 今日目标&#xff1a; 完成MySQL的安装及登陆基本操作能通过SQL对数据库进行CRUD能通过SQL对表进行CRUD能通过SQL对数据进行CRUD 1&#xff0c;数据库相关概念 以前我们做系统&#xff0c;数据持久化的存储采用的是文件存储。存储到文件中可以达到系统关闭数据不会…

struts2值栈,OGNL表达式,interceptor

struts2获取servlet api 第一种获取方式   获得原生request   HttpServletRequest request ServletActionContext.getRequest();   获得原生response   HttpServletResponse response ServletActionContext.getResponse();第二种获取方式   实现ServletRequestAwar…

如何给ppt编辑页码_拒绝千篇一律:Word插入“侧边”页码,让文档别具一格!...

微信扫码观看全套Excel、Word、PPT视频之前&#xff0c;有为大家介绍过插入页码的技法&#xff0c;你还记吗&#xff1f;(点击此处&#xff0c;阅读文章)我们已知道Word插入页码的方法&#xff0c;而且我们也很会用了。但是&#xff0c;如果要插入下图所示的侧边页码&#xff0…

二、MySQL高级

mysql高级 今日目标 掌握约束的使用 掌握表关系及建表原则 重点掌握多表查询操作 掌握事务操作 1&#xff0c;约束 上面表中可以看到表中数据存在一些问题&#xff1a; id 列一般是用标示数据的唯一性的&#xff0c;而上述表中的id为1的有三条数据&#xff0c;并且 马花疼…

设计模式之 里氏替换原则

里氏替换原则(Liskov Substitution Principle, LSP)&#xff1a;所有引用父类的地方必须能使用其子类的对象。 简单来说就是 子类拥有父类所拥有的一切&#xff0c;并可以在此基础上进而扩展其他的属性和方法。转载于:https://www.cnblogs.com/blazeZzz/p/9260874.html

sql数据库去重语法_Mysql数据库中查询重复数据和去重数据 , 删除重复数据的sql及分析...

Mysql数据库中查询重复数据和去重数据 , 删除重复数据的sql及分析发布时间&#xff1a;2018-06-17 13:22,浏览次数&#xff1a;858, 标签&#xff1a;Mysqlsql数据库中有重复数据时,用到哪些sql语句?这里有若干数据,并掺杂了重复数据1. 查看过滤重复后的数据思路, group by 分…

Maven基础(总结)——入门学习

Maven基础 一、Maven概述 1.Maven是专门用于管理和构建Java项目的工具&#xff0c;它的主要功能有&#xff1a; 提供了一套标准化的项目结构提供了一套标准化的构建流程&#xff08;编译&#xff0c;测试&#xff0c;打包&#xff0c;发布……&#xff09;提供了一套依赖管理…

c#重写了窗体的OnKeyDown事件,但是不执行

设置下窗体的KeyPreview属性值为True即可 总结&#xff1a;遇到类似这样的问题&#xff0c;比如其他窗体运行没问题&#xff0c;就新建的窗体有问题。应该检查下窗体的属性。 转载于:https://www.cnblogs.com/codeDevotee/p/7093333.html

python答疑的作用_不学Python之集中答疑(5)

Python不用学&#xff0c;用用你就会。本辑答疑针对Python自然学习法二阶第二单元课程&#xff1a;Q&#xff1a;什么是字典&#xff1f;A&#xff1a;字典也是Python里面的一种多元素数据的存放方式。对于多个元素需要存放在一个变量名下的数据&#xff0c;Python里面常见的有…

MyBatis学习笔记(超详细总结)

MyBatis学习笔记 一、MyBatis概述 1.什么是MyBatis? MyBatis 是一款优秀的持久层框架&#xff0c;用于简化 JDBC 开发 MyBatis 本是 Apache 的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code&#xff0c;并且改名为yBatis 。2013年11…