Skip to main content

作业布置

完成课堂所有的代码​

web-note/Code/day08 (github.com)

说出结构伪类的 nth-child 和 nth-of-type 的区别,并且写出案例练习​

:nth-child 选择器不一定生效(有不是同类型的干扰项)。

  • :nth-child 只计算父元素的第几个子元素,不管是否是同种类型,也不会排除干扰项。
  • :nth-of-type 计数时只计算父元素下同种类型的元素,会排除所有的干扰项。

例如:

  • .demo p:nth:last-of-type(2) 计算 .demo 下的倒数第二个 p 元素。(先找出所有 p 元素,然后取倒数第二个)。
  • .demo p:nth-last-child(2) 计算 .demo 下所有元素,如果倒数第二个是 p 元素则选中,不是就放弃(选择器无效)。
.demo

- p.box1
- p.box2
- p.box3
- h4.job
- p.box4
- h4.name
- p.box5


使用 .demo p:nth:last-of-type(2) 会选中 .box4
使用 .demo p:nth-last-child(2) 没有盒子生效。因为 .demo 倒数第二个是 h4 元素,选择器限定 p 元素。
Loading Github Gist ...
Details

自己练习使用字体图标​

Loading Github Gist ...
Details

自己找精灵图进行练习​

Loading Github Gist ...
Details

Loading Github Gist ...
Details

结合 CSS 元素定位,并且找出对应的练习案例​

Loading Github Gist ...
Details

Loading Github Gist ...
Details