HTML连载17-id选择器&类选择器
一、问题：我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式，这对于我们个性化定制产生了阻碍，因此我们便引出了id选择器，来进行特别指定进行配置样式
二、id选择器
1.定义：根据指定的id名称找到对应的标签，然后设置属性
2.格式：
#id名称｛
属性：值；
｝
3.例如：
<style>
p{
color: rgb(255,45,45);
}
#label1{
color:black;
}
#label2{
color: #37fa1e;
}
#label3{
color: blue;
}
#label4{
color:green;
}
</style>
</head>
<body>
<b id="label1"></b>
<p id="label2">迟到毁一生</p>
<p id="label3">早退穷三代</p>
<p id="label4">按时上下班</p>
<p id="label5">必成高富帅</p>
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.例子：
<style>
.pp2{
color: aqua;
}
.pp3{
color:blue;
}
</style>
</head>
<body>
<p class="pp2">迟到毁一生</p>
<p class="pp3">早退穷三代</p>
<p class="pp2">按时上下班</p>
<p class="pp2">必成高富帅</p>
</body>
4.注意点：
（1）每个HTML标签中都有一个属性叫做class ,也就是说每个标签都可以设置class
（2）在同一个界面中class名称是可以重复的
（3）在编写class选择器的时候一定要在class名称前面加上.
（4）class名称是有规范的：只能由字母、数字、下划线组成的，且不能以数字开头；class名称不能以HTML标签名来命名(和id的命名规范一样)
（5）使用类选择器就是为了设置样式的
（6）在HTML中每个标签可以同时绑定多个类名
格式：
<标签名称 class=“class名1 class名2 class名3”>
例如：
.ppp{
font-size: 50px;
}
.pppp{
color:red;
}
.ppppp{
font-family: 微软雅黑;
}
.......(省略中间的)
<p class="ppp pppp ppppp">实验一下</p>
多个类名控制不同的属性。
四、源码：
d69_class_selector
d68_id_selector
地址:
https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载17-id选择器&类选择器的更多相关文章
- jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换
首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- HTML连载64-a标签伪类选择器的注意点与练习
一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原 ...
- 01.css选择器-->类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS标签选择器&类选择器
基本选择器包括标签选择器.类选择器和ID选择器三类,其他选择器都是在这三类选择器的基础上组合形成 ##标签选择器 示例: <style type="text/css"> ...
- 前端 CSS的选择器 基本选择器 类选择器
类选择器 符号是.开头 然后类的名字 样式类名不要用数字开头(有的浏览器不认). 所谓类就是class,.class与id非常相似,任何标签都可以加类,但是类可以重复 通过样式类选择元素: 示例: & ...
- css笔记10：多个id选择器/类选择器包含相同部分问题的探讨
有些时候,我们可以将多个class选择器或者id选择器,html选择器的共同部分提取出来,写在一起,这样的好处是是可以简化css文件 1.首先我们先看一段代码.css,如下: @charset &qu ...
- CSS-id选择器-类选择器-属性选择器
Css基础 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 每个属性有一个值.属性和值被冒号分开. 下 ...
- 请写出css中选择器（元素选择器、类选择器、id选择器）的优先级顺序，和当各种选择器组合时，优先级的计算规则是什么？
id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
随机推荐
- Qt Designer布局预览正常，代码调用时所有控件堆在一起
一.实验环境 1.Windows10x64 2.anaconda4.6.9 + python3.7.1(anaconda集成,不需单独安装) 3.pyinstaller3.5 二.问题描述 1.Qt ...
- pandas 学习 第7篇：DataFrame - 数据处理（应用、操作索引、重命名、合并）
DataFrame的这些操作和Series很相似,这里简单介绍一下. 一,应用和应用映射 apply()函数对每个轴应用一个函数,applymap()函数对每个元素应用一个函数: DataFrame. ...
- [IDA]批量载入结构体
我们之前介绍了如果单独定义一个C结构体并转换为IDA中的结构体. 但是,在内核中有很多庞大的结构体,一环接着一环,手动导入不现实. 还存在一个问题,可能大小格式不匹配. 之前有一位老哥推荐我一个工具: ...
- 记一次hosts配置内容过多引起的故障
问题环境 系统环境 CentOS release 6.9 (Final) 2.6.32-696.16.1.el6.x86_64 Java 环境 1.8.0_151 Apollo 1.4.0 代码框架 ...
- java高并发系列 - 第8天:线程组
线程组 我们可以把线程归属到某个线程组中,线程组可以包含多个线程以及线程组,线程和线程组组成了父子关系,是个树形结构,如下图: 使用线程组可以方便管理线程,线程组提供了一些方法方便方便我们管理线程. ...
- 用 Python 监控知乎和微博的热门话题
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: TED Crossin的编程教室 PS:如有需要Python学习资料 ...
- python中Socket的使用
说明 前一段时间学习python网络编程,完成简单的通过python实现网络通信的功能.现在,将python中Socket 通信的基本实现过程做一个记录备份. Socket通信 python 中的so ...
- linux系统管理-输入输出
目录 linux系统管理-输入输出 参数传递xargs linux系统管理-输入输出 重定向 将原本要输出到屏幕上的数据信息,重新定向到指定的文件中 运行程序,或者输入一个命令:默认打开4个文件描述符 ...
- postman---post请求数据类型
我们都知道接口post方法中有不同的请求类型,再写postman中发送请求的时候只是简单的写了一种,今天我们重新了解下Postman如何发送post的其他数据类型 Postman中post的数据类型 ...
- Java jdom解析xml文件带冒号的属性
Java jdom解析xml文件带冒号的属性 转载请标明出处: https://dujinyang.blog.csdn.net/article/details/99644824 本文出自:[奥特曼超人 ...