前端学习day4--CSS3（复合选择器、CSS特性、背景属性、显示模式）

目录

复合选择器：

后代选择器：

子代选择器：

并集选择器：

交集选择器：

伪类选择器（hover）：

超链接的4种状态：

CSS特性：

继承性：

层叠性：

优先级：

若是基础选择器时：

若是复合选择器时---叠加计算机制：

方法：

Emmet写法--即vscode的简写方式：

背景属性：

背景色（bgc）：

背景图（bgi）:

背景平铺方式（bgr）:

no-repeat

repeat

repeat-x

repeat-y

背景图位置（bgp）：

背景图缩放（bgz）：

​编辑背景图固定（bga）:

背景复合属性（bg）:

显示模式：

类型：

转换显示模式（display）：

---

复合选择器：

只要是选择器，作用就是找标签。两个span，要想精准的找到div中的span并且除了能使用类选择器外（少量时）还可以使用复合选择器（多个时，方便）。

后代选择器：

后代选择器，孙子关系也会变化。

工作中用选择器找标签时尽量不用标签选择器，用父级＋标签名。

子代选择器：

并集选择器：

交集选择器：

伪类选择器（hover）：

伪类选择器是指选中元素的某个状态设置样式，这里以鼠标悬停状态hover来讲解。

任何标签都可以设置鼠标悬停的状态。

其中超链接标签不仅有hover状态，还有其他

若当鼠标悬停时使得某个选择器如何如何，也可采用hover再指向某个选择器：

这就表示了当鼠标指向banner时 banner中的.prev 要显示出来。

超链接的4种状态：

CSS特性：

继承性：

子级继承父级的文字控制属性。

应用：工作中可以直接设置body的字体和颜色，这样整个网页都将遵循这个规则。因为body是网页所有标签的“父”。特指文字控制属性（文字样式）。若标签自己有样式则不会继承父的性质。

层叠性：

在选择器一样的情况下：

优先级：

下面是选择器的优先级（选择器若不一样时到底哪个选择器生效呢）。

若是基础选择器时：

!important是加在分号；前面。但是慎用！

若是复合选择器时---叠加计算机制：

方法：

先分析权重最高和权重最低的情况有无出现。

后再把（  ， ， ， ）这四种的个数找出来按照第一条原则进行比较。

Emmet写法--即vscode的简写方式：

类选择器中对div来说更加特殊，是直接.类型即可产生div.类名的效果。

在CSS中，w500+h200+bgc 回车就可以一下子生成三个，分别也可以这样生成，还会带上单位！

例如：

背景属性：

背景色（bgc）：

背景图（bgi）:

背景平铺方式（bgr）:

在浏览器中，背景图默认是平铺（复制）的效果，也就是当盒子太大时，其将会直接复制。

no-repeat

repeat

repeat-x

repeat-y

背景图位置（bgp）：

工作中背景图位置（二维）的值可以是关键字和坐标单独用也可以是混用。

只有一个数字时默认是水平方向的，另一方向居中。

会自动生成0，0，表明水平和垂直方向都是0这个位置（left,top）是默认的。

背景图缩放（bgz）：

若图片的比例与盒子的比例一致 则contain和cover的效果是一致的。

第三种用的较少。

背景图固定（bga）:

工作中有时背景中元素过多可以滚动内容，但需要背景图不变，则需要此属性。

背景图固定一般用在浏览页的整个大图中。

背景复合属性（bg）:

显示模式：

类型：

块级例如div；行内例如span；行内块例如img。

转换显示模式（display）：

工作中常用的是前两个。

对某选择器使用display:none 是指对选择器所指向的标签不显示。