程序员书籍笔记 程序员书籍笔记
  • HTML
  • CSS
  • JavaScript
  • 前端知识
  • Vue
  • MarkDown
  • git
  • Node.js
  • Linux
  • 51单片机
  • 四级
  • 第一学期课程
  • 操作系统
  • 计算机网络
  • 数据结构
  • 计算机组成原理
  • HTML5
  • Electron
  • 日记便签
  • 前端导航
GitHub (opens new window)
  • HTML
  • CSS
  • JavaScript
  • 前端知识
  • Vue
  • MarkDown
  • git
  • Node.js
  • Linux
  • 51单片机
  • 四级
  • 第一学期课程
  • 操作系统
  • 计算机网络
  • 数据结构
  • 计算机组成原理
  • HTML5
  • Electron
  • 日记便签
  • 前端导航
GitHub (opens new window)
  • HTML

  • CSS

    • CSS规范
    • 基础
    • 选择器
    • 元素显示
    • 元素背景属性
    • CSS三大特征
      • 层叠性
      • 继承性
        • 行高的继承-特殊
      • 优先级
    • 盒子模型
    • CSS浮动
    • CSS四种定位
    • CSS显示
    • CSS技巧
    • CSS3基础
    • CSS2D转3D
    • 移动端布局
    • 移动端适配
    • 响应式布局
    • CSS的查询属性
  • JavaScript

  • GO

  • 正则表达式

  • java

  • TypeScript

  • react

  • 前端知识

  • jQuery

  • Python

  • C和C++

  • 前端和后端
  • CSS
yuadh
2021-08-20
目录

CSS三大特征

# 层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖另一个冲突的样式。层叠性最要解决样式冲突的问题

  • 样式冲突,遵循的原则就是就近原则,哪个样式离结构近,就执行哪个样式
  • 样式不冲突,不会层叠

# 继承性

子标签会继承父标签的某些样式,如文本颜色和字号。

  • 恰当地使用继承可以简化代码,降低CSS样式的复杂性
  • 子元素可以继承父元素的样式( text-,font-,line-这些元素开头可以继承,以及color属性)
//常见的继承属性
color
font-xxx
text-xxx
line-height
1
2
3
4
5

特殊情况

  • a标签的 color 会继承失效
  • h系列标签的 font-size 会继承失效
  • div 的高度不能继承

因为浏览器自带的样式层叠了

# 行高的继承-特殊

body {
 font: 12px/1.5 Microsoft YaHei;
}
1
2
3
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高*1.5倍
  • 如果子元素设置了行高,则行高为当前子元素行高*1.5倍
  • 这样写法最大的优势是里面的子元素可以根据自己文字大小自动调整行高

# 优先级

选择器权重如下表示

选择器 选择器权重
继承 或者 * 0,0,0,0
元素选择器 0,0,0,1
类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
!important 无穷大
  • 权重有4组数字组成,但是不会有进位
  • 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0

权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重

笔记

​ div ul li ---> 0,0,03

​ .nav ul li ---> 0,0,1,2

​ a:hover ---> 0,0,1,1

​ .nav a ---> 0,0,1,1

编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48
元素背景属性
盒子模型

← 元素背景属性 盒子模型→

Theme by Vdoing | Copyright © 2021-2023 yuadh
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×