一. 伪类和伪元素
-
1.1伪类
-
目标伪类- target主要用于
锚点-a链接
- target主要用于
-
-
元素状态伪类 disabled/enable/checked
-
动态伪类-在a标签上的表现,写在style处
-
link->未访问状态链接
-
visited->已访问的状态
-
focus->a和input, 当获取焦点,改变样式
- 去掉聚焦状态, tabindex可以调整tab选中元素的顺序
-
-
-
hover其他元素可以使用->鼠标放上去后的状态
-
active其他元素可以使用->手指点下去,未松手的状态
-
a:hover必须放在a:link和a:visited之后
-
a:active必须在a:hover后
-
结构伪类
-
必须是子类
-
括号里数字表示第几个子元素改变
-
:nth-child(n)- 里面的n代表自然数,html里面没有0
- 2n:所有的偶数,even表示偶数
- 奇数:2n+1/2n-1:odd表示奇数
- 3n+2
- -n+5,n可以取负数
-
-
nth-last-child->从后向前数 -
nth-of-type-
只属于某一种类型,例如p标签
-
必须是子元素
-
如果类型不同,忽略
-
-
nth-last-of-type
-
first-child
-
last-child
-
first-of-child
-
only-child->父元素中的唯一子元素
-
empty->元素里面的内容为空
-
only-of-type->父元素中唯一的这种类型的子元素
-
root->伪类代表html元素
-
否定伪类
- :not()
不要忽略body和html元素,因为这两个元素可能会导致达不到自己想要的预期效果- 一般不会写两个body
-
-
-
伪元素(pseudo-elements)
-
伪类不是伪元素
-
为了区分伪元素和伪类,
伪元素一般使用两个冒号::,伪类使用: -
::first-line:选中第一行(不常用)
-
::first-letter:选中第一行字母(用的不是很多)
-
::before和after在元素的前面或者后面插入其他内容
content属性即使里面没有内容也不能删除!!!!
-
伪元素可以看成是行内元素,行内元素不能改变宽度和高度属性
-
二.Emmet语法
-
生成html5代码文档声明...
- !
- html5:5
-
生成子代的元素
- div>p>span>strong
- 做简单的格式化->ALT+shift+F(不好用)
- 用于嵌套层级少
-
生成兄弟元素
- h2+div+p
- 兄弟元素和子元素一起使用>+
-
生成层
- div>p3+div3
-
生成返回上一个层级
- ^
- 可以使用多个
-
可以用括号包裹成一个整体,括号分组()
-
列子如下
-
生成id属性
- 标签#id名
-
生成类属性
- 标签.class名
-
生成其他普通属性
- 标签[属性名]
-
生成带有属性值的属性名
- 标签[属性名="属性值"]
-
一次性添加多个属性
-
生成元素的内容
{}- 元素->属性->属性值->内容
-
生成的结构中有数字,属性中有数字
- 生成的内容中有数字
-
隐式标签
-
.默认生成div元素,类名为box- .box
-
生成div元素,ID名为main
- #main
-
ul里面只能放li
-
此时
.不代表div
-
CSS的常用的emmet语法
fz20->font-size:20
fw400/fw700
lh50px
bgc
dib:display:inline-block
