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,一经查实,立即删除!

相关文章

八、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;他们用的就是手、脚等身体…

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

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

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;数据持久化的存储采用的是文件存储。存储到文件中可以达到系统关闭数据不会…

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

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

二、MySQL高级

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

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

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

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

创建并发布npm包

1.npm官网创建npm账户 npm网站地址&#xff1a;https://www.npmjs.com/ npm网站注册地址&#xff1a;https://www.npmjs.com/signup 2.命令行工具登录npm npm login 验证登录是否成功 npm who am i 3.创建npm库 npm init 按照提示输入相应内容&#xff1a; 以下为package.json内…

Android 开发笔记___drawable

1 <?xml version"1.0" encoding"utf-8"?>2 <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"3 android:layout_width"match_parent"4 android:layout_height"match_parent"5 …

win7 管理iphone日历_大师给你传授win7系统安装桌面日历的途径

win7正式版系统是公认操作便捷的电脑系统&#xff0c;大概很多人在操作过程中都会有应对win7系统安装桌面日历难题的时候。不少小白计算机技术还纯属于菜鸟&#xff0c;关于win7系统安装桌面日历的情况&#xff0c;不能自行处理。很多人都来询问小编win7系统安装桌面日历应该如…

内部属性 聚合_光的本质(用粒子性解释光的所有属性,颜色,介质内速度改变等)...

本文已经发布于《科技展望》2017年27期&#xff0c;转发请注明。1.1 光的本质1.1.1 光的本质光是地球上的生命体存在的前提条件&#xff08;当然地球上也存在不能见光的生命体&#xff0c;但即使是这些生命体不能见光&#xff0c;它们最终需要的能源也间接的来源于光&#xff0…

easyui(一) 初始easyui

分享使我快乐。哈哈~ --WZY 一、什么是easyui&#xff1f; 学习一个东西&#xff0c;最重要的是知道它的定位(是干嘛的&#xff0c;基本的用法是什么&#xff0c;快速入门)&#xff0c;其实easyui也非常简单&#xff0c;不要觉得很难。 easyui就是一个前端框架&#xff0c;JQue…

mysql数据库代码_【代码总结】MYSQL数据库的常见操作

MYSQL数据库的常见操作一、mysql的连接与关闭-h&#xff1a;指定所连接的服务器位置-u&#xff1a;数据库的用户名-p&#xff1a;数据库的密码1 mysql -u 用户名 -p //连接数据库2 密码3 exit //关闭数据库1 mysql_connect($host,$user,$password); //连接数据库2 mysql_close(…

HDU1023 Train Problem II

传送门https://vjudge.net/problem/HDU-1023 解题思路&#xff1a; 大数和卡特兰数 实现代码&#xff1a; #include <iostream> #include <cstring> #include <cstdio> #include <cstdlib> using namespace std;const int MAX100; const int BASE10000…