CSS------3.复合选择器与 display

目录

CSS复合选择器

1.CSS复合选择器

1.1 后代选择器（重点）

1.2 子元素选择器

1.3 交集选择器

1.4 并集选择器（重点）

1.5 链接伪类选择器（重点）

1.6 复合选择器总结

2.标签显示模式（display）重点

2.1 什么是标签显示模式

2.2 块级元素（block）

2.3 行内元素（inline）

2.4 行内块元素（inline-block）

2.5 三种模式总结区别

2.6 标签显示模式转换 display

---

CSS复合选择器

1.CSS复合选择器

1.1 后代选择器（重点）

• 概念： 后代选择器又称为包含选择器
• 作用： 用来选择元素或元素组的子孙后代
• 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

1.2 子元素选择器

• 作用： 子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。
• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
• 语法：

div的亲儿子，只找亲儿子，不找孙子

1.3 交集选择器

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

• 语法：

• 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，
• 如h3.special。

1.4 并集选择器（重点）

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

• 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
• 记忆技巧： 并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。

1.5 链接伪类选择器（重点）

• 伪类选择器： 为了和我们之前学的类选择器相区别

• 类选择器是一个点 比如 .demo {}

• 而我们的伪类用2个点就是冒号, 比如 :link{}

• 作用： 用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。 因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

• a:link /* 未访问的链接 */

• a:visited /* 已访问的链接 */

• a:hover /* 鼠标移动到链接上 */

• a:active /* 选定的链接-激活状态 */

1.6 复合选择器总结

2.标签显示模式（display）重点

2.1 什么是标签显示模式

• 什么是标签的显示模式？ 标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个
• 作用： 我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。
• 标签的类型(分类) HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

2.2 块级元素（block）

1. 块级元素的特点

-比较霸道，自己独占一行

-高度，宽度、外边距以及内边距都可以控制。

-宽度默认是容器（父级宽度）的100%

-是一个容器及盒子，里面可以放行内或者块级元素。 2. 注意： 只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2.3 行内元素（inline）

• 行内元素的特点： 相邻行内元素在一行上，一行可以显示多个。 高、宽直接设置是无效的。 默认宽度就是它本身内容的宽度。 行内元素只能容纳文本或则其他行内元素。
• 注意： 链接里面不能再放链接。 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

不能给span设置标签

2.4 行内块元素（inline-block）

• 行内块元素的特点：

-和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个 -默认宽度就是它本身内容的宽度。 -高度，行高、外边距以及内边距都可以控制。

2.5 三种模式总结区别

2.6 标签显示模式转换 display

• 转换为行内：display:inline;
• 转换为块：display:block;
• 转换为行内块： display: inline-block;