后代子元素选择器交集并集选择器 4大复合选择器的区别

①后代选择器（重点）

　　【空格隔开】

　　概念：后代选择器又叫包含选择器

　　为什么要用复合选择器？因为基础选择器不够强大，不能快速高效准确精细的完全页面style设置。复合选择器是两个或多个基础选择器组合而成的。

　　作用：用来选择元素或者元素的子孙后代

　　写法：把外层标签写在前面，内存标签写在后面，中间用空格分隔，先写爷爷父亲，再写儿子孙子。

　　语法：父级子级 {属性：属性值；属性：属性值}

　　注：当标签发生嵌套时，内层标签就成了外层标签的后代标签

/*后代选择器*/
/* 常山 赵子龙 */
.nav a {color:red;
}
.wang ul li {color:red;
}

　　②并集选择器（重点）

　　【逗号隔开】

　　如果某些选择器定义的样式是相同的样式，就可以利用并集选择器。可以让代码更简洁。并集选择器（css选择器分组）是各个选择器通过连接而成的。通常用于集体申明。

　　任何基础选择器都能组合成并集选择器。

　　记忆技巧：用于集体申明，各个选择器用“，”分隔。“，”可以理解成“和”的意思。

/*并集选择器*/
p,div,.my {color:red;
}

　　③子元素选择器

　　【 > 隔开】

　　作用：只能选择某元素（亲儿子）的元素。

　　写法：父亲标签写在前面 + > + 儿子标签 {}

　　注意：子元素必须是亲儿子，不包含孙子重孙子之类的。

/*子元素选择器*/
div>strong {color:red;
}

　　④交集选择器

　　【.号连接】

　　条件：交集选择器由两个选择器组成。找到的标签必须满足：既有第一个标签的特点，又有第二个标签的特点。

　　记忆技巧：交集是并且的意思，即是。。。又是。。。的意思。但通常用的不多，也不建议使用。

/*交集选择器*/
<p class="red">红色</p>
p.red {color:red;
}

http://moban.shenhuangji.com/post/27.html

后代子元素选择器交集并集选择器 4大复合选择器的区别相关推荐

HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
css复合选择器（后代选择器、子代选择器、并集选择器、链接伪类选择器、：focus选择器）
什么是复合选择器? 在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签 ...
CSS基本知识之复合选择器、元素显示模式、背景图片位置，精灵图
CSS基本知识之复合选择器.元素显示模式.背景图片位置,精灵图一.复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进 ...
CSS复合选择器，元素的显示模式，CSS背景设置
CSS复合选择器,元素的显示模式,CSS背景设置欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页- ...
CSS复合选择器、元素显示模式、背景
[CSS复合选择器.元素显示模式.背景] 一.CSS的复合选择器 1.1 什么是复合选择器在 CSS 中,可以根据选择器的类型把选择器分为:基础选择器和复合选择器,复合选择器是建立在基础选择器之 ...
前端之CSS篇(二)——CSS复合选择器及元素的显示模式和背景属性
1.Emmet语法 Emmet语法是前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法. 1.1快速生成HTML结构语法 (1)生成标签直接输入 ...
CSS 2 emmet语法复合选择器元素显示模式
目录 Emmet语法 1.1快速生成HTML结构标签 1.2快速生成CSS样式语法 CSS的复合选择器 1.1什么是复合选择器 1.2后代选择器(重要) 1.3子选择器(重要) 1.4并集选择器(重要 ...
3.【CSS复合选择器、元素显示模式display、背景background所有】简洁版小米侧边栏案例
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! b站视频链接:https://www.bilibili.com/video/BV14J4114768. 笔记参考大佬:https:/ ...
CSS（二）——复合选择器、元素显示模式、背景、三大特性
文章目录 *1.Emmet语法 *1.1 快速生成HTML结构语法 *1.2 快速生成CSS样式语法 1.CSS 的复合选择器 1.1 什么是复合选择器 1.2 后代选择器 (重要) 1.3子选择器( ...

后代子元素选择器交集并集选择器 4大复合选择器的区别

后代子元素选择器交集并集选择器 4大复合选择器的区别相关推荐

最新文章

热门文章