Html&Css 基础总结（基础好了才是最能打的）四

Html&Css 基础学习回顾总结

Html&Css 基础总结（基础好了才是最能打的）一
Html&Css 基础总结（基础好了才是最能打的）二
Html&Css 基础总结（基础好了才是最能打的）三

---

---

前言

这是作者的第四天总结篇章， 有需要的小伙伴可以 在这里 找到上一篇文章
视频在这里~ @B站黑马程序员视频

视频共15天，作者会以天为粒度，来分散到不同文章中，有兴趣的小伙伴可以关注一下，谢谢你
书中错误在所难免，如果有小伙伴发现的话恳请斧正，在此先谢过咯~

---

本篇文章主要讲述CSS的复合选择器、特性、背景属性和显示模式

复合选择器

后代选择器

选中某个元素的后代元素（内嵌元素）

子代选择器

选择某元素的子级元素，不往下走了

并集选择器

选中多组标签设置相同的样式，
选择器1,2，3…n` 选择器之间用，隔开

交集选择器 （了解即可）

选中同时满足多个条件的元素

伪类选择器

状态选择器，表示元素的状态，选中元素的某个状态设置样式
鼠标悬停状态：选择器 hover （css属性）

选择器后面加：hover， 适用于基础选择器

伪类选择器-超链接的四个状态

:link 访问前；
:visited 访问后；
:hover 鼠标悬停；
:active 点击时（激活）；

CSS的特性

继承性

子级标签默认继承父级的文字控制属性，例如字体大小粗细颜色等…
但是有一种情况会失效，就是当子标签有自己的相同样式，例如颜色，的时候；

层叠性

意思是说相同的属性， 后面的会覆盖前面的（从上往下执行），而不同的属性会被叠加， 试想一下两个相同的标签选择器，不同的属性会被叠加， 如果是一样的，则后面的会把前面的覆盖掉

优先级

当一个标签适配多个选择的时候，该以哪个为优先呢？ 就是匹配规则呢？
“谁的优先级高选择器”

规则： 选择器的范围越大， 优先级就越低
公式： 通配符选择器 <标签选择器<类选择器< id选择器<行内样式 <!important

tips： 通配符选择器就是 *{xx}

可是important 是个什么东西？ 之前怎么没学过
ok，他是一个提权的 其实是提升优先级；
具体用法
#myid{
color:red !important // 那么这个的优先级就是最高的了
}

叠加计算规则

叠加计算： 如果是复合选择器， 则需要权重叠加计算；
公式（每一级之间不存在进位比较）
行内样式，id选择器格式， 类选择器个数，标签选择器个数；
从左向右依次比较个数， 同一级个数多的优先级高， 如果个数相同，则向后比较；
！important 权重最高
继承权重最低

Emmet 写法

Emmet 写法就是代码的简写方式，缩写输入vs code会自动生成对应的代码~我觉得蛮好的

html：

标签名.类名,div.mycalss:
<div class="mycalss"></div>
标签名#id名,div#cc:
<div id="cc"></div>
同级标签,div+p
<div></div>
<p></p>
父子级别标签： div>p
<div>
    <p></p>
</div>
多个相同标签 span*3
<span></span><span></span><span></span>
带内容的div，div{ccc}
<div>cccc</div>

css：
大多数简写方式未属性单词的首字母（自动提示）

背景属性

背景色：background-color;
背景图：background-image;
背景图平铺方式: repeat;
背景图位置：position；
背景图缩放：size；
背景图固定：attachment;
背景复合属性：background

div{

    width: 500px;
    height: 500px;
    background-color: blue;
    background-image: url(./641.webp);
    /*  不平铺  */
    background-repeat: no-repeat;
    /* 方向英文单词  center left right top */ 
        /* 0 0 ，左上角  */
    background-position: center center;
    /* 图片完全覆盖盒子 */
    /* background-size: cover; */
    /* 保留图片自身宽高比例 */
    /* background-size: contain; */

    /* 等同cover */
    background-size: 100%;

    /*  背景图固定 */
    /* 背景图不会随着元素的内容滚动  */
    background-attachment: fixed;

}

显示模式

标签元素的显示方式

块级元素

• 独占一行
• 默认是父级的100% ;
• 添加宽高元素生效；

行内元素

例如span， 添加宽高不生效， 所以外部要包裹一个块级元素；

行内块元素

行内不换行， 默认尺寸由内容撑开
例子： span(image)

转换显示模式

属性名： display
属性值：
block 块级；
inline-block; 行内块；
inline 行内；

结束

今天的学习也到此为止了，希望大家都有所收获，再见