容易误解的前端知识汇总(笔记中)
2017-04-17 09:31
267 查看
一.容易误解的CSS知识
1.first-child、last-child,选中第一个或最后一个元素,注意官方称父元素的第一个...,这个意味着着即便你加上“a”、“.样式”这样的选择器,他依然不理不睬。效果如下:我们使用这个css选中最后一个a
#div1 p:last-child{background:#f00;}元素结构如下
<div id=div1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p>选我p</p> <a>选我a</a> </div>
你会发现并非如愿,p和a在一个父亲元素下方,所以last-child会选择最后一个儿子a,而非p。
所以以后使用时就无需画蛇添足的为:last-child前加上限制性的名称了,直接#div1 :last-child{background:#f00}就得了!除非你需要确定如果最后一个元素为p才使用样式,如果不是p则不显示样式,那么可以加上p或其他限制。
如果不得不获取第几个,可以使用:nth-last-child(倒数第几个)、 nth-last-type-of(dom)、p:nth-last-child(3n+0)、p:nth-last-child(odd)、p:nth-last-child(even)。
2.
相关文章推荐
- Java笔记--Web前端知识汇总之三 JavaScript
- ES6基础知识笔记汇总(学习微信前端教程)
- Java笔记--Web前端知识汇总之二 CSS
- Java笔记--Web前端知识汇总之二 DHTML
- Web前端知识技能大汇总
- Web前端知识技能大汇总
- 前端知识汇总【面试用】(二)
- 前端程序员容易忽视的一些基础知识
- Flex 学习笔记 小知识汇总
- web前端知识汇总81-100
- Web前端知识技能大汇总
- javascript基础知识精华笔记汇总
- 前端知识汇总-----CSS选择器和CSS3新增选择器
- 前端学习知识汇总(包括js,css,node.js,AngularJS,jq等)
- web前端知识汇总21-40
- Web前端知识技能大汇总
- 前端知识汇总【面试用】(一)
- opencv学习笔记——中文论坛上相关知识汇总
- 移动Web 开发中的一些前端知识收集汇总
- Mysql知识汇总笔记