B站coderwhy前端html+css学习笔记

内容概述

一、伪类和伪元素

1.1常见的伪类（ pseudo-classes）

• 动态伪类（dynamic pseudo-classes）

  • ：link、：visited、：focus、：hover、：active、
    • a:link ：未访问的链接
    • a:active :正在访问的链接
    • 注意：hover必须放在link和visited周后才可以生效
    • 形象记忆：女友看到lv包包，疯（f)一样的哈哈（ha)大笑

• 目标伪类（target pseudo-classes）

  ：target(锚点)

• 语言伪类（language pseudo-classes)

• 元素状态伪类（UI element states pseudo-classes）

• 结构伪类（structure pseudo-classes）

  • nth-child（）

    选中元素中的第一个

    • 数字
    • n/2n+1/-n+3etc

  • nth-last-child（）

    倒数第几个

  • nth-of-tyle

    第几个

    • 相同类型
    • 如果类型不同，忽略

  • nth-last-of-tyle

    倒数几个

  • first-child

  • last-child

  • first-of-child

  • last-of-child

  • only-child

  • empty

  • root

  • （用一个冒号来写）

• 否定伪类（negative pseudo-classes）

  • 特殊情境下用否定伪类
  • class不香吗？

1.2伪元素

• first-line

• first-letter

• ：：before和：：after用来在一个元素的内容之前之后插入其他内容（可以是图片或者文字）用url来引用图片

• 使用两个冒号来写

二、Emmet语法

• ！和HTML：5

• >和+
  

• *&^&()

• 属性id/class/普通

• 内容{}

• $

• 隐式标签 div ul>.item$*5 table>.row>.content

• css emmet语法

三、css特性

作业