HTML连载18-id选择器与class区别&class选择器使用思路&后代选择器
一、id选择器和classable选择器的区别
|
选择器 |
CSS中的开头 |
HTML标签可以绑定几个 |
是否可重复 |
用途 |
|
id选择器 |
# |
仅能一个 |
不可以重复（一个标签里仅有一个） |
一般情况下是给JS用的，除非特殊情况下才给设置样式用 |
|
class选择器 |
. |
可以多个 |
可以重复（多对多的关系） |
专门用来设置样式的 |
二、选择器的技巧可以节省代码行数
看好问题：做一个网页
“我是好人”（颜色：红色；格式：宋体）
“我是学生”（颜色：绿色；格式：宋体）
”我是坏人“（颜色：红色；格式：楷体）
正常的编码是：就是按照一段一段的写
好处是清晰，每一段知道设置的什么，互不干扰，但是冗余代码太多。
我们需要转换思路，以属性为中心，先设置好，在配到标签上去，可以节省代码。
.d1{
color:red;
font-family: 宋体;
}
.d2{
color:green;
font-family: 宋体;
}
.d3{
color:red;
font-family: 楷体;
}
......省略代码......
<p class="d1">我是好人</p>
<p class="d2">我是学生</p>
<p class="d3">我是坏人</p>
我们改进代码：显示的一致，这也是对class性质（多标签可对多个class选择器）的应用，否则我们全用id选择器不也一样，一旦大网站开发，涉及到文本图片是庞大，先定义好格式，配到文本图片
.color_red{
color: red;
}
.color_green{
color:green;
}
.ff_songti{
font-family: 宋体;
}
.ff_kaiti{
font-family: 楷体;
}
......省略代码......
<p class="color_red ff_songti">我是好人</p>
<p class="color_green ff_songti">我是学生</p>
<p class="color_red ff_kaiti">我是坏人</p>
二、后代选择器
1.定义：找到指定标签的所有后代标签然后设置属性。用途即为：企业开发会有上千上万标签，因此挨个写class或者id就累死了，因此div应运而生。
2.格式：
标签属性1 标签属性2｛
属性：值；
｝
3.含义：先找到名称叫做标签名称1的标签，然后在这个标签下面去查找所有名称为标签名称2的标签，然后再设置属性
4.注意：
（1）后代选择器必须使用空格隔开
div p{
color:red;
}
..........省略代码........
<p>我是段落1</p>
<div>
<p>我是红的1</p>
<p>我是红的2</p>
</div>
（2）后代不仅仅是儿子，也包括孙子/重孙子等等
div p{
color:red;
}
..........省略代码......
<div>
<ul>
<li><p>重孙子标签p，试一试</p></li>
</ul>
</div>
（3）后代选择器不仅仅可以使用标签名称，还可以使用其他选择器（这个性质更具扩展性，代表div下面一堆各种标签都统一了格式，选择器样式会有这么就是为了减轻我们的编码负担，能够适配各种场景，找到最优解）
一个id的例子：
#test1 p{
color:blue;
}
..........省略代码......
<div id="test1" class="test2">
<p>我是红的1</p>
<p>我是红的2</p>
</div>
另一个class的例子：
.test2{
color:green;
}
..........省略代码......
<div id="test1" class="test2">
<p>我是红的1</p>
<p>我是红的2</p>
</div>
（4）div标签里面的标签也可以使用id，class属性也都能搭配
格式：只演示id的，class的把#换成.就行了
#div的id名称 #div里面的标签的id名称｛
属性：名称；
｝
（5）div标签可以向下无限延伸
格式：
div ul li p{
属性：值：
｝
例如：
div ul li p{
color:red;
}
</style>
</head>
<body>
<p>我是段落1</p>
<div id="test1" class="test2">
<p>我是红的1</p>
<p>我是红的2</p>
<ul>
<li><p>重孙子标签p，试一试</p></li>
</ul>
</div>
二、源码：
d70_id_selector&class_selector
d71_posterity_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连载18-id选择器与class区别&class选择器使用思路&后代选择器的更多相关文章
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- CSS后代选择器,子选择器和相邻兄弟选择器
平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...
- css后代选择器 .属性 元素 与 元素.属性的区别
经常看见css的后代选择器是这样的写法: div.class 和 .class div 的形式两者的区别: div.class 是选中的类名为class 的div元素,与直接使用类选择器.cla ...
- html中id name class的区别（转）
HTML 中 id与name 区别 一个name可以同时对应多个控件,比如checkbox和radio 而id必须是全文档中唯一的 id的用途 1) id是HTML元素的Identity,主要是在客户 ...
- html元素中id和name的区别
可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Nam ...
- CSS 子元素选择器与后代选择器区别实例讲解
css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...
- CSS的子选择器与后代选择器的区别
来源于:http://www.jianshu.com/p/599654ba5f4a 子选择器: 一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑 ...
- html中元素的id和name的区别（2016-1-22）
HTML中元素的Id和Name属性区别 一直以来一直以为在html中,name和id没什么区别,今天遇到一个坑才发现(PHP获取不到表单数据,原因:元素没有name,只定义了id),这两者差别还是很大 ...
随机推荐
- 【raid级别】RAID级别工作模式
友情链接 磁盘分区,格式化,挂载,创建交换分区:https://www.cnblogs.com/HeiDi-BoKe/p/11936998.html RAID工作级别:https://www.cnbl ...
- Apollo的基本概念和集成实战
基本概念 使用场景 是一个分布式的配置中心.适用于微服务: 核心功能 集中管理不同环境,不同集群的配置: 配置修改后可以实时推送到应用端: 具备规范的权限,流程治理特性: 开发技术 服务端使用spri ...
- vue项目中引入iconfont
背景 对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...
- 用Python程序批量删除excel里面的图片
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: Rhinoceros PS:如有需要Python学习资料的小伙伴可以 ...
- SpringMVC详解------参数绑定
SpringMVC详解------参数绑定 转载于:https://blog.csdn.net/swebin/article/details/92795422 目录 1.SpringMVC 参数绑定 ...
- java核心技术第三篇之JDBC第一篇
01.JDBC_两个重要的概念: 1).什么是数据库驱动程序:由数据库厂商提供,面向某种特定的编程语言所开发的一套访问本数据库的类库. 驱动包一般由两种语言组成,前端是:面向某种特定编程语言的语言:后 ...
- dependencies和devDependencies区别
vue-cli3.x项目的package.json中,有两种依赖: dependencies:项目依赖.在编码阶段和呈现页面阶段都需要的,也就是说,项目依赖即在开发环境中,又在生产环境中.如js框架v ...
- JS基础语法---continue关键字
continue: 在循环中如果遇到continue关键字,直接开始下一次循环 如下:continue在计数器之前,会一直循环,浏览器会崩溃,我的就崩溃了 var i = 0; while (i &l ...
- crawlscrapy简单使用方法
crawlscrapy简单使用方法 1.创建项目:scrapy startproject 项目名例如:scrapy startproject wxapp windows下,cmd进入项目路径例如d:\ ...
- vue+hammer.js完美实现长按、左滑，右滑等触控事件
移动端使用手指直接操作的方式大受用户欢迎,这其中就包括了单点.多点.长按.双击等方式. 这么多触控事件,如果开发者自己实现,会浪费大量的时间和精力,快来看看 hammer.js 让我们轻松了多少吧. ...