class选择器:

<p class="p1">

.p1{
color:red;
.....
}

id选择器:

<p id="p2">

#p1{
color:red;
.....
}

异同:

相同点:可以应用于任何元素
不同点:

  1.id全局唯一;class无要求;

  2.class选择器可以写成下面形式:

<p class="p p1">

.p{
color:red;
.....
} .p1{
font-size:20px;
.....
}

  id只能有一个。错误示例:

<p id="p p2">   <!-- 这是错误写法 -->

html class选择器与id选择器的更多相关文章

  1. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  2. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

  3. 类选择器与ID选择器的比较

    如果已经在元素中标识了class或id,就可以在选择器中使用这个标准,从而只对已标识的元素进行格式化.不过推荐使用类选择器,一会儿我会解释理由. 要在class选择器和id选择器之间作出选择的时候,建 ...

  4. CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)

    通配符选择器  *   与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B    对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...

  5. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  6. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  7. jquery基本选择器:id选择器、class选择器、标签选择器、通配符选择器

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本选择器 jquery基本选择器,包括id选择器.class选择器.标签选择器.通配符选择器,同时配合选择器的空格 ...

  8. 选择器(ID选择器)

    ID选择器: 为HTML标签添加ID属性: <p id="p1">内容1</p> <p id="p2">内容2</p& ...

  9. 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?

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

随机推荐

  1. jvm 年轻代、年老代、永久代

    关键字约定 Young generation –>新生代    Tenured / Old Generation –>老年代    Perm Area –>永久代 年轻代: 所有新生 ...

  2. Python-网络爬虫模块-requests模块之响应-response

    当requests发送请求成功后,requests就会得到返回值,如果服务器响应正常,就会接收到响应数据: Response响应中的属性和方法 常用属性: status_code: 数据类型:int ...

  3. 工具篇-Java中一些utils

    下边是整理的一些Java开发的utils,顺便吐槽下新浪博客的编辑器排版跟我写的博客一样 烂,所以改用博客园 一.字符串 1. Java中String与其他类型之间的转换 String与日期对象 pu ...

  4. eletron打包

    https://www.cnblogs.com/BigJ/p/electron.html https://www.cnblogs.com/kakayang/p/9559777.html

  5. 朱晔的互联网架构实践心得S2E3:品味Kubernetes的设计理念

    Kubernetes(k8s)是一款开源的优秀的容器编排调度系统,其本身也是一款分布式应用程序.虽然本系列文章讨论的是互联网架构,但是k8s的一些设计理念非常值得深思和借鉴,本人并非运维专家,本文尝试 ...

  6. 平均精度均值(mAP)——目标检测模型性能统计量

    在机器学习领域,对于大多数常见问题,通常会有多个模型可供选择.当然,每个模型会有自己的特性,并会受到不同因素的影响而表现不同. 每个模型的好坏是通过评价它在某个数据集上的性能来判断的,这个数据集通常被 ...

  7. 三、xadmin----内置插件

    1.Action Xadmin 默认启用了批量删除的事件,代码见xadmin-->plugins-->action.py  DeleteSelectedAction 如果要为list列表添 ...

  8. K进制数

    题目描述 考虑包含N位数字的K-进制数. 定义一个数有效, 如果其K-进制表示不包含两连续的0. 考虑包含N位数字的K-进制数. 定义一个数有效, 如果其K-进制表示不包含两连续的0. 例: 1010 ...

  9. Python入门-文件操作

    文件读取f = open('D:/工作日常/学生空姐模特护士联系方式.txt', 'r', encoding=‘utf-8’)f.read()f.close()解释file='D:/工作日常/学生空姐 ...

  10. Python_列表初识及操作

    列表 列表初识 列表属于容器性数据类型. li = [123, '狗', True, [1, 2, 3], {'name': 'Lon'}, (1, 2, 3)] 其中包含有int型,例如123:字符 ...