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大数据学习视频礼包

转载于:https://www.cnblogs.com/ruigege0000/p/11111902.html

HTML连载18-id选择器与class区别class选择器使用思路后代选择器相关推荐

css样式,后代选择器
css介绍 CSS(层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).css语法(下图所示) 每个CSS ...
html后代选择器的语法,[转]CSS子选择器与后代选择器
注:之前一直不混淆子选择器和后代选择器的关系,今天看到一篇文章很不错,一下子明白了,特此转载. 通俗的讲就是: 儿子一定是后代,但是后代不一定是儿子. css子元素选择器和后代选择器在功能描述上非常相 ...
QT qss选择器------后代选择器
格式:选择器 1 选择器 2{ 属性: 值; } 这个选择器表示: 在选择器 1 匹配的所有对象中, 找到选择器 2 所匹配的所有后代对象, 并给它们设置样式. 注意点: (1). 后代选择器必须用 ...
【CSS 教程系列第 8 篇】什么是 CSS 中的后代选择器
这是[CSS 教程系列第 8 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器.伪 ...
[css] css中class和id选择器有什么区别？
[css] css中class和id选择器有什么区别? id 在部分浏览器的 js 中会直接生成同名变量: id 的唯一性,获取该 id 的 dom 时,会取同名 id 的前者: id 层叠权重非常高 ...
jQuery - 元素选择器和 #id 选择器以及 .class 选择器三者的区别
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作,jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 ...
js后代选择器_后代选择器和子元素选择器的区别
原文简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...
input 的id 和name什么区别
在表单(input)中id和name的区别但是name在以下用途是不能替代的: 1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.因为有许多name会同时对应多 ...
CSS的子选择器与后代选择器的区别
来源于:http://www.jianshu.com/p/599654ba5f4a 子选择器: 一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑 ...

HTML连载18-id选择器与class区别class选择器使用思路后代选择器

HTML连载18-id选择器与class区别class选择器使用思路后代选择器相关推荐

最新文章

热门文章