html class选择器与id选择器
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选择器的更多相关文章
- CSS类选择器和ID选择器
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...
- CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...
- 类选择器与ID选择器的比较
如果已经在元素中标识了class或id,就可以在选择器中使用这个标准,从而只对已标识的元素进行格式化.不过推荐使用类选择器,一会儿我会解释理由. 要在class选择器和id选择器之间作出选择的时候,建 ...
- CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)
通配符选择器 * 与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B 对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- jquery基本选择器:id选择器、class选择器、标签选择器、通配符选择器
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本选择器 jquery基本选择器,包括id选择器.class选择器.标签选择器.通配符选择器,同时配合选择器的空格 ...
- 选择器(ID选择器)
ID选择器: 为HTML标签添加ID属性: <p id="p1">内容1</p> <p id="p2">内容2</p& ...
- 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?
id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...
随机推荐
- Spring Security(二十三):6.5 The Default AccessDecisionManager(默认接入策略管理)
This section assumes you have some knowledge of the underlying architecture for access-control withi ...
- Generative Adversarial Nets[CycleGAN]
本文来自<Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks>,时间线为2017 ...
- ReactJs入门教程-精华版
原文地址:https://www.cnblogs.com/Leo_wl/p/4489197.html阅读目录 ReactJs入门教程-精华版 回到目录 ReactJs入门教程-精华版 现在最热门的前端 ...
- 快看Sample代码,速学Swift语言(3)-运算符
运算符是用来检查,更改或组合值的特殊符号或短语.Swift提供的很多常规的运算符,如+.-.*./.%.=.==等,以及逻辑运算的&&.||等等,基本上不需要重复介绍,我们在这里只需要 ...
- LNK2022: 元数据操作失败(8013118D): 重复类型(FactoryContext)中的布局信息不一致: (0x02000230)
1. c++项目 A 编译成A.lib文件 2. c++项目B引用这个A.lib文件 3. A项目存在一个类跟B项目一样,但是A项目其他文件需要这个类里面的某些东西,我将不需要的全部注释掉,然后编译A ...
- Linux 的系统目录介绍
/bin 二进制可执行命令 /dev 设备特殊文件/etc 系统管理和配置文件/etc/rc.d 启动的配置文件和脚本/home 用户主目录的基点,比如用户user的主目录就是/home/user,可 ...
- 学习用Node.js和Elasticsearch构建搜索引擎(4): 构建Elasticsearch搜索引擎
一.目标 使用node搭建一个知识库检索系统,要求词条平均检索速度必须在1s以内. 二.思路. 本人思路如下图. 橙色部分为我们要开发的内容, ES服务搭建(暂时用单节点测试,集群搭建以后再说), 三 ...
- H5 59-浮动元素的脱标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 01-HTML介绍
1.WEB标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构:html.表示: ...
- PS滤镜制作下雨照片特效
原图 一.打开你想要添加下雨效果的照片,并新建一个图层,命名为雨,填充为黑色,对“雨”层执行:滤镜 > 杂色> 添加杂色,参数如图. 二.对“雨”层执行:滤镜 > 模糊 > 高 ...