一、问题：我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式，这对于我们个性化定制产生了阻碍，因此我们便引出了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选择器&类选择器的更多相关文章

  1. jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换

    首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  2. HTML连载64-a标签伪类选择器的注意点与练习

    一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原 ...

  3. 01.css选择器-->类选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS标签选择器&类选择器

    基本选择器包括标签选择器.类选择器和ID选择器三类,其他选择器都是在这三类选择器的基础上组合形成 ##标签选择器 示例: <style type="text/css"> ...

  5. 前端 CSS的选择器 基本选择器 类选择器

    类选择器 符号是.开头 然后类的名字 样式类名不要用数字开头(有的浏览器不认). 所谓类就是class,.class与id非常相似,任何标签都可以加类,但是类可以重复 通过样式类选择元素: 示例: & ...

  6. css笔记10：多个id选择器/类选择器包含相同部分问题的探讨

    有些时候,我们可以将多个class选择器或者id选择器,html选择器的共同部分提取出来,写在一起,这样的好处是是可以简化css文件 1.首先我们先看一段代码.css,如下: @charset &qu ...

  7. CSS-id选择器-类选择器-属性选择器

    Css基础 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 每个属性有一个值.属性和值被冒号分开. 下 ...

  8. 请写出css中选择器（元素选择器、类选择器、id选择器）的优先级顺序，和当各种选择器组合时，优先级的计算规则是什么？

    id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...

  9. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

随机推荐

  1. Redis高可用集群-哨兵模式（Redis-Sentinel）

     前言 Redis哨兵模式,用现在流行的话可以说就是一个“哨兵机器人”,给“哨兵机器人”进行相应的配置之后,这个"机器人"可以7*24小时工作,它能能够自动帮助你做一些事情,如监控 ...

  2. Python-round函数

    round函数:对给定的数进行四舍五入,只有一个参数的情况下,是将其四舍五入后为整型,第二个参数是保留几位小数 a = round(2.523456) print(a) print('a的类型',ty ...

  3. NOI2019退役记 upd:2019.12.1

    (我把原来写的东西全部删掉了) AFO. 我退役了,\(\mbox{yyb}\)退役了. 至少,在接下来的日子里,我得投身到文化课,度过快乐的高三生活了. 这两年的\(OI\)生涯给了我很多,让我学会 ...

  4. MYSQL 高级语法

    1.高级建表和插入 使用creat 和select 进行建表操作,中间采用AS 标识符: CREATE TABLE new_table AS SELECT * FROM exist_table LIM ...

  5. 【centOS】centOS7 下载

    地址:http://mirrors.aliyun.com/centos/ 进入国内的阿里云的,这里CentOS 7提供了三种ISO镜像文件的下载:DVD ISO.Everything ISO.Mini ...

  6. make 命令与 Makefile

    make 是一个工具程序,通过读取 Makefile 文件,实现自动化软件构建.虽然现代软件开发中,集成开发环境已经取代了 make,但在 Unix 环境中,make 仍然被广泛用来协助软件开发.ma ...

  7. 2019-9-23-win10-uwp-睡眠唤醒

    原文:2019-9-23-win10-uwp-睡眠唤醒 title author date CreateTime categories win10 uwp 睡眠唤醒 lindexi 2019-9-23 ...

  8. C#上手练习6（方法语句1）

    方法是将完成同一功能的内容放到一起,方便书写和调用的一种方式,也体现了面向对象语言中封装的特性. 定义方法的语法形式如下. 访问修饰符    修饰符    返回值类型    方法名(参数列表){    ...

  9. Latex学习笔记 第一章

    1.使用空行分段. 空行只起分段的作用,使用过多的空行并不起增大段间间距的作用. 2.段前不用打空格,LateX会自动完成文字的缩进. 即使打了也会被自动忽略. 3.通常汉字后面的空格会被忽略,其他符 ...

  10. Python上下文管理器的使用

    上下文管理器可以控制代码块执行前的准备动作,以及执行后的清理动作. 创建一个上下文管理器类的步骤:(1)一个__init__方法,来完成初始化(可选)(2)一个__enter__方法,来完成所有建立工 ...