内容概述
一、伪类和伪元素
1.1常见的伪类( pseudo-classes)
-
动态伪类(dynamic pseudo-classes)
- :link、:visited、:focus、:hover、:active、
- a:link :未访问的链接
- a:active :正在访问的链接
- 注意:hover必须放在link和visited周后才可以生效
- 形象记忆:女友看到lv包包,疯(f)一样的哈哈(ha)大笑
- :link、:visited、:focus、:hover、:active、
-
目标伪类(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特性
作业