CSS 进阶秘籍：核心知识点全解析

一、复合选择器：精准定位元素的“组合拳”

1. 后代选择器：选“子孙后代”

/* 选中 ul 下所有 li（儿子、孙子都行） */
ul li {
    color: red;
}

特点：用空格隔开，选中父元素内的所有子元素。

---

2. 子选择器：只选“亲儿子”

/* 只选中 div 下的直接 p 标签（亲儿子） */
div > p {
    color: blue;
}

特点：用 > 隔开，只选直接子元素。

---

3. 并集选择器：一键批量操作

/* 同时选中 h1 和 .title 元素 */
h1, .title {
    font-size: 24px;
}

特点：用英文逗号 , 隔开，集体声明样式。

---

4. 伪类选择器：动态交互小能手

/* 鼠标悬停时变红 */
a:hover {
    color: red;
}
/* 输入框聚焦时背景变黄 */
input:focus {
    background-color: yellow;
}

常用伪类：

• :hover（悬停）
• :focus（聚焦）
• :link（未访问链接）
• :visited（已访问链接）

---

二、元素显示模式：块、行内、行内块的区别

1. 块级元素：霸道总裁

• 特点：独占一行，可设宽高（如
  、

  ）

• 常见标签：

  ~

  、

  、

  ---

  2. 行内元素：灵活小分队

  • 特点：一行多个，宽高无效（如 、）
  • 注意：不能嵌套块级元素！

  ---

  3. 行内块元素：跨界高手

  • 特点：一行多个 + 可设宽高（如 、）
  • 典型问题：图片间默认有缝隙，可用 float 解决。

  ---

  4. 显示模式转换

  a {
      display: block;    /* 行内变块级 */
      display: inline;   /* 块级变行内 */
      display: inline-block;  /* 行内块 */
  }
  

  ---

  三、背景属性：给元素穿“皮肤”

  1. 背景颜色 & 图片

  div {
      background-color: #f0f0f0;  /* 背景色 */
      background-image: url("logo.png");  /* 背景图 */
  }
  

  ---

  2. 背景平铺与定位

  div {
      background-repeat: no-repeat;  /* 不平铺 */
      background-position: center top;  /* 居中靠上 */
      /* 简写：颜色 图片 平铺 定位 */
      background: #fff url("bg.jpg") no-repeat center;
  }
  

  ---

  3. 背景固定与半透明

  body {
      background-attachment: fixed;  /* 背景不滚动 */
      background: rgba(0,0,0,0.5);  /* 半透明背景 */
  }
  

  ---

  ⚖️ 四、CSS 三大特性：层叠、继承、优先级

  1. 层叠性：后来者居上

  • 口诀：同选择器样式冲突时，最后写的生效！

    div { color: red; }
    div { color: blue; }  /* 最终蓝色生效 */
    

  ---

  2. 继承性：子承父业

  • 可继承属性：文字相关（color、font、text-align）

    body { font-size: 16px; }
    p { /* 自动继承 16px */ }
    

  ---

  3. 优先级：权重决定一切

  选择器类型	权重值（示例）
  !important	∞ 无穷大
  行内样式 style=""	1000
  ID 选择器 #nav	100
  类选择器 .title	10
  标签选择器 div	1
  继承样式	0

  权重叠加规则：

  .nav li {}    /* 10 + 1 = 11 */
  #header .logo {}  /* 100 + 10 = 110 */
  

  ---

  五、Emmet 语法：代码速写神器 ⚡

  1. 快速生成 HTML

  ul>li*3>a{菜单$}  
  <ul>
      <li>菜单1li>
      <li>菜单2li>
      <li>菜单3li>
  ul>
  

  ---

  2. 快速生成 CSS

  w200 → width: 200px;  
  lh26 → line-height: 26px;  
  bgc#f00 → background-color: #ff0000;
  

  ---

  ️ 实战技巧 & 常见问题

  1. 单行文字垂直居中

  div {
      height: 40px;
      line-height: 40px;  /* 行高 = 容器高度 */
  }
  

  2. 清除默认边距

  * {
      margin: 0;
      padding: 0;
  }
  

  3. Chrome 调试技巧

  • 快捷键：F12 打开开发者工具
  • 功能：实时修改 CSS、查看盒模型、取色器（Shift + 点击颜色）

  ---

  总结口诀

  1. 选择器：后代空格子大于，并集逗号伪类冒。
  2. 优先级：行内千位 ID 百，类十标签一，继承零！
  3. 背景：颜色图片平铺位，固定半透样样行。
  4. 元素模式：块级独占行内乖，行内块是跨界牌。