首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    css选择器中:first-child与:first-of-type的区别

    http://www.cnblogs.com/2050/p/3569509.html :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。...p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素; h1:first-child  匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个; span:first-child...  匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素; 然后,在css3中又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?...所以,通过以上两个例子可以得出结论: :first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。

    1K10

    8则未必知道且超级实用的纯CSS布局排版技巧 | 网易4年实践

    从HTML/CSS/JS前端三剑客的定位来看,HTML映射网页的「结构」,CSS映射网页的「表现」,JS映射网页的「行为」。...大部分同学认为布局排版就是几个合理的CSS属性随便拼凑在一起,但多数情况即使实现也会存在瑕疵,此时就可能使用JS介入。...从布局排版的特征可知它属于表现范畴,因此笔者认为大部分布局排版都能使用纯CSS完成,无需JS介入。...JS实现吸附效果的代码在网上一搜一大堆,更何况笔者喜欢耍CSS,在此就不贴相关的JS代码了。在此推荐一个很少见很少用的CSS属性position:sticky。...JS重要但CSS同样重要,希望喜欢CSS的同学多多关注笔者,相信你一定会有更多CSS方面的收获。

    3.3K20

    zblogphp导航高亮代码分享教程

    具体教程如下: .js代码如下: //dhgl jQuery(document).ready(function($){  var datatype=$("#dhmenu").attr("data-type...datatype){                 if(myid=="nvabar-item-index"){                     $("#nvabar-item-index a:first-child...                        if(myid=="navbar-category-"+b[i]){                             $("#navbar-category-"+b[i]+" a:first-child...                    if(myid=="navbar-page-"+infoid){                         $("#navbar-page-"+infoid+" a:first-child...大概说一些js的文件代码的意思,打开网站,首先判断是页面,如果是列表页,则加载列表页代码,增加class=“on2” 如果是文章页,判断上级分类ID,然后加载class="on2" zbp导航高亮代码修改完毕

    1.5K10

    前端: 开发一款有点意思的仿微信朋友圈应用

    适配问题 移动端适配问题可以通过js动态设置视口宽度/比率或者采用css媒介查询来处理,这块市面上已经有非常成熟的方案 页面流畅度 我们可以在body上设置-webkit-overflow-scrolling...我们用js实现起来很方便,但是对性能及其不友好,而且对于用户发布的每一条动态的图片都需要用js重新计算一遍,作为一个有追求的程序员是不可能让这种情况发生的,所以我们用css3来实现,其实有关这种实现方式笔者在之前的...(3):first-child, &:nth-last-child(4):first-child, &:first-child:nth-last-child(n+2) ~ div {...width:calc(50% - 6px); height: 200px; overflow: hidden; } &:first-child:nth-last-child...(n+5), &:first-child:nth-last-child(n+5) ~ div { width: calc(33.33333% - 6px); height

    1.9K10

    基于reactvue开发一个专属于程序员的朋友圈应用

    适配问题 移动端适配问题可以通过js动态设置视口宽度/比率或者采用css媒介查询来处理,这块市面上已经有非常成熟的方案 页面流畅度 我们可以在body上设置-webkit-overflow-scrolling...我们用js实现起来很方便,但是对性能及其不友好,而且对于用户发布的每一条动态的图片都需要用js重新计算一遍,作为一个有追求的程序员是不可能让这种情况发生的,所以我们用css3来实现,其实有关这种实现方式笔者在之前的...(3):first-child, &:nth-last-child(4):first-child, &:first-child:nth-last-child(n+2) ~ div {...width:calc(50% - 6px); height: 200px; overflow: hidden; } &:first-child:nth-last-child...(n+5), &:first-child:nth-last-child(n+5) ~ div { width: calc(33.33333% - 6px); height

    96910

    关于css的八个结构伪类选择器 :last-child、:first-of-type、:nth-last-of-type()

    Live Server插件为了实现实时修改保存后自动刷新页面的功能,在我们打开Open with Live Server时自动创建了一个script标签,写入了js代码 因为在body中自动创建了script...就会选择到最后一个div,设置的紫色背景也会生效: 那既然查了这么多了,不如就趁此机会复习一下很多人一直没搞清楚的几个css伪类选择器: :first-child & :first-of-type :...first-child:选取在一组兄弟元素中的第一个元素。...解释一下:比如p:first-child{},选择的就是p元素的兄弟元素的第一个元素,且这个元素必须是p元素才被选择;div:first-of-type就是选择div的兄弟元素中的第一个div元素。...比如,这样使用div:first-child选择第一个div,并设置背景为天蓝色: 但是如果在第一个div前加上一个p元素,那么div:first-child就不再选择得到第一个div元素,因为div

    1.5K20

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券