nth-of-type()和nth-child()写法一样,这里只用nth-of-type()演示,习惯type

直接上代码

         /* 从前向后选择,第6个开始 */
         li:nth-of-type(n+6){
             background: pink;
         }
         /* 从前向后选择,选择前6个 */
         li:nth-of-type(-n+6){
             background: blue;
         }
         /* 从后向前选择,倒数第6个结束 */
         li:nth-last-of-type(-n+6){
             background: red;
         }
         /* 选择第6个到第9个元素*/
         li:nth-of-type(n+6):nth-last-of-type(n+6){
             background: black;
         }

css结构选择器组合使用,选择父元素中多个子元素中某一段元素的更多相关文章

  1. CSS 基础 选择器的使用汇总

    1.后代选择器 html 结构 <div class='father'> <p>小哥哥 小姐姐</p> <div> <p>小帅锅</p ...

  2. 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  3. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  4. CSS复合选择器,元素的显示模式,CSS背景设置

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  5. HTML+CSS教程(五)外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出

    一.外联样式 通过link标签引入外部css文件夹中的xxx.css文件到head标签中 例: 二. 1.组选择器 选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: & ...

  6. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  7. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  8. css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

    CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在 ...

  9. js随笔,css和js禁止网页选择文本,table的class样式使得td的class样式失效,jquery获得元素坐标

    css使用user-select,user-select不是W3C标准,浏览器支持不完整:user-select有两个值,none用户不可以选择文本,text用户可以选择文本 body{-moz-us ...

随机推荐

  1. 多进程multiprocessing

    PACKAGE CONTENTS connection dummy (package) forking heap managers pool process queues reduction shar ...

  2. Scrapy 框架 中间件,信号,定制命令

    中间件 下载器中间件 写中间件 from scrapy.http import HtmlResponse from scrapy.http import Request class Md1(objec ...

  3. jdk8在windows及linux环境下安装

    jdk下载 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html 目前大部分公司内部使用的还是jdk8,大部 ...

  4. [APIO2007] 风铃

    题目链接 可能是个树上 DP?指针真好玩 23333. 首先对于所有玩具如果有深度差超过 1 的就是无解(在这里贡献 WA * 3),所以 dfs 一遍记录深度是有必要的…… 然后如果有一个点的两颗子 ...

  5. Go-常用库的介绍

    一.Go常用包介绍  fmt.它实现了格式化的输入输出操作,其中的fmt.Printf()和fmt.Println()是开 发者使用最为频繁的函数.  io.它实现了一系列非平台相关的IO相关接口 ...

  6. 海亮OI学习游记

    这只是一篇纯洁的游记,这里将要记录我在海亮十天集训的生活与被虐的历史QWQ...... Day1(2.10)刚来到海亮,嗯,这的环境真的不错. 来到机房,woc这机房的配置好高啊...这里都能打守望屁 ...

  7. HashMap底层结构、原理、扩容机制

    https://www.jianshu.com/p/c1b616ff1130 http://youzhixueyuan.com/the-underlying-structure-and-princip ...

  8. Redis protocol (redis通信协议)

    以前只会用redis -cli客户端, 或者在java程序里使用jedis来作为介质与redis服务器通信.这两天正好在实习中接触了一点这方面的内容. 五一放假就稍微翻了翻redis相关资料. 本篇博 ...

  9. windows7 java环境配置

    最近在工作碰到了在ie浏览器调用java程序时,出现了一些问题,所以在这里整理一下: jdk的下载地址为:http://666dx.pc6.com/wwb3/jdkx6417.zip 正对于windo ...

  10. 第28月第24天 requestSerializer

    1. requestSerializer关于 requestSerializer它就是AFNetworking参数编码的序列化器,它一共有三种编码格式: AFHTTPRequestSerializer ...