HTML+CSS 核心笔记 （三）

复合选择器

后代选择器

后代选择器：选中某元素的 后代 元素

选择器写法： 父选择器 子选择器 { CSS 属性}，父子选择器之间用 空格 隔开

<style>
/* div里面的 所有span文字颜色是红色*/
/* 后代选择器，选中所有后代，包含儿子、孙子、重孙子*/
  div span {
        color:red;
}
</style>
<div>
    <span>这是div的儿子</span> 
<p>
    <span>div的孙子</span>
</p> 
</div>

子代选择器

子代选择器：选中某元素的 子代 元素（最近的子级）

选择器写法： 父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开

<style>
/*div的儿子span 文字颜色是红色 孙子没变色*/
div > span {
        color:red;
}
</style>
<div>
    <span>这是div的儿子</span> 
<p>
    <span>div的孙子</span>
</p> 
</div>

 并集选择器

并集选择器：选中 多组 标签设置 相同 的样式

选择器写法： 选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开

<style>
/*div、p、span 文字颜色是红色*/
div,
p,
span {
color: red;
}
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

交集选择器 – 了解

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

选择器写法： 选择器1选择器2 { CSS 属性}， 选择器之间连写 ，没有任何符号

<style>
/*第一个 p 标签文字颜色是红色*/
/*既是 p 标签，又是 box 类*/
    p.box {
        color: red;
}
</style>
<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面

伪类选择器

伪类表示元素 状态 ，选中元素的某个状态设置样式

鼠标悬停状态：选择器 :hover { CSS 属性 }

<style>
/*a div 标签，鼠标悬停时，颜色为红色和绿色*/
a:hover {
color: red;
}
.box:hover {
color: green;
}
</style>
<a href="#">a 标签</a>
<div class="box">div 标签</div>

伪类-超链接（拓展）

超链接一共有四个状态

：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写（即由表中上到下一次写）

CSS 特性

继承性

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

注意：如果标签有默认文字样式会继承失败

层叠性

特点：

• 相同的属性会 覆盖 ： 后面 的 CSS 属性覆盖 前面 的 CSS 属性

• 不同的属性会 叠加 ： 不同 的 CSS 属性 都生效

<style>
/*div标签里面文字为绿色，因为相同属性被覆盖了*/
/*div标签字体为加粗，字体大小为30px*/
div {
color: red;
font-weight: 700;
}
div {
color: green;
font-size: 30px;
}
</style>
<div>div 标签</div>

注意： 选择器类型相同则遵循层叠性 ，否则按选择器 优先级 判断

优先级

也叫权重，当一个标签使用了 多种 选择器时，基于不同种类的选择器的 匹配规则

选择器优先级高的样式生效

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

（ 选中标签的范围越大，优先级越低 ）

<style>
/*因为类选择器优先级比标签选择器高，所以div 标签 里面的文字为绿色*/
div {
color: red;
}
.box {
color: green;
}
</style>
<div class="box">div 标签</div>

优先级 – 叠加计算规则

叠加计算：如果是 复合选择器 ，则需要权重叠加计算

公式：（每一级之间 不存在进位）

规则：

• 从左向右 依次比较选个数， 同一级 个数 多 的优先级 高 ，如果个数相同，则向后比较

• !important 权重最高

• 继承权重最低

Emmet 写法

代码的 简写 方式， 输入缩写 VS Code 会 自动生成 对应的代码

挺常用的，懒人必备

HTML:

 

CSS:

大多数简写方式为属性单词的 首字母

 背景属性

 背景图

网页中，使用背景图实现 装饰性 的图片效果

属性名： background-image

属性值： url(背景图 URL)

div {
width: 400px;
height: 400px;
background-image: url(./images/1.png);
}

提示： 背景图默认有平铺（复制）效果

所以，要想只有一个猫的话

控制背景图平铺方式：

属性名： background-repeat （bgr）

属性值

div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
}

背景图位置

属性名： background-position （bgp）

属性值：水平方向位置 垂直方向位置

• 关键字

 

 

坐标（数字 + px， 正负 都可以）

水平：正数向右；负数向左

垂直：正数向下；负数向上

提示：

• 关键字 取值方式写法，可以 颠倒 取值顺序

• 可以只写 一 个关键字， 另一个方向 默认为 居中；数字 只写 一 个值表示 水平 方向，垂直方向为 居中

背景图缩放

作用：设置背景图大小

属性名： background-size （bgz）

常用属性值：

• 关键字

cover ：等比例 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

contain ：等比例缩放背景图片以完全装入背景区，可能背景区部分空白

• 百分比 ：根据盒子尺寸计算图片大小

• 数字 + 单位（例如：px）

提示：工作中， 图片比例与盒子比例相同 ，使用 cover 或 contain 缩放背景图效果相同

背景图固定

作用： 背景不会随着元素的内容滚动。

属性名： background-attachment （bga）

属性值： fixed

背景复合属性

属性名： background （bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（ 空格 隔开各个属性值， 不区分顺序 ）

div {
width: 400px;
height: 400px;
background: pink url(./images/1.png) no-repeat right center/cover;
}

显示模式

块级元素

独占 一行

宽度默认是 父 级的 100%

添加 宽高 属性 生效

 

行内元素

一行 可以显示 多个

设置 宽高 属性不 生效

宽高尺寸由 内容撑开

行内块元素

一 行可以显示 多个

设置 宽高 属性 生效

宽高尺寸也可以由 内容撑开

转换显示模式

属性名： display

属性值