举例说明： 
<ul> <p>111</p> <span>222</span> <li>1</li> <li>2</li> <li>3</li> </ul> 
li:nth-of-type(2):表示ul下的第二个li元素 
li:nth-child(2)：表示既是li元素又是在ul下的第二个元素（找不到）。 
建议一般使用nth-of-type，不容易出问题。

7.nth-of-type | nth-child?【CSS】的更多相关文章

  1. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  2. 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏

    在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...

  3. 【css】用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  4. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  5. 【CSS】iconfont的使用

    说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有 ...

  6. 【CSS】378- [译]44个 CSS 精选知识点

    写在前面 一个周五的晚上,闲来无事整理下自己的 github(经常做收藏党),今天打算都过一遍,发现一个 star很高的项目,里面有大量的 CSS 片段,而且标题很诱人,然后又花了将近1个小时从头到尾 ...

  7. 【CSS】css动画及过渡和变换属性

    1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...

  8. 【CSS】元素样式

    1.使用CSS的三种方式: 方式一.通过元素的style属性来设置元素的样式 方式二.在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源,通常是一个C ...

  9. 【CSS】318- CSS实现宽高等比自适应容器

    点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自 ...

  10. 【CSS】知识笔记

    一.CSS文件 1.引用css文件,放在Head里面,可以减少repaint和reflow. 浏览器渲染页面大概是这样的,当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有C ...

随机推荐

  1. SQL优化-如何分析性能瓶颈

    MySQL优化一览图 笔者将优化分为了两大类:软优化和硬优化.软优化一般是操作数据库即可:而硬优化则是操作服务器硬件及参数设置. 1.软优化 1)查询语句优化 首先我们可以用EXPLAIN或DESCR ...

  2. ElasticSearch5.2.2 安装(老版本)

    https://www.elastic.co/downloads/elasticsearchElasticSearch是一个高可扩展的开源的全文搜索分析引擎.它允许你快速的存储.搜索和分析大量数据.E ...

  3. firewall防火墙常用操作

    # firewall防火墙常用操作 - 启动```systemctl start firewalld```- 停止```systemctl stop firewalld```- 重启```system ...

  4. Intellij idea 告警：'while' statement cannot complete without throwing an exception

    有时候这个告警是多余的,例如我们手写的监控线程. 如果有消除告警强迫症.在线程的执行方法上加入注解. @SuppressWarnings("InfiniteLoopStatement&quo ...

  5. Xamarin图表开发基础教程（11）OxyPlot框架支持的图表类型

    Xamarin图表开发基础教程(11)OxyPlot框架支持的图表类型 OxyPlot组件中支持7种类型的条型图表,分别为普通条形图.线型条形图.矩形条形图.差值图.龙卷风图.普通柱形图和柱形误差图, ...

  6. Java 使用ZkClient操作Zookeeper

    目录 ZkClient介绍 导入jar包依赖 简单使用样例 ZkClient介绍 因为Zookeeper API比较复杂,使用并不方便,所以出现了ZkClient,ZkClient对Zookeeper ...

  7. idea切换工作目录后无法重启问题记录

    1.idea每次重新打开新项目或者切换新的工作空间后,总是半天起不来.有时候知道是缓存或者其他的问题,有时候莫名其妙就好了. 本次原因是:

  8. Ingress 访问日志分析与监控

    阿里云Ingress除了提供外部可访问的 URL.负载均衡.SSL.基于名称的虚拟主机外,还支持将所有用户的HTTP请求日志记录到标准输出中.同时Ingress访问日志与阿里云日志服务打通,您可以使用 ...

  9. .Net Core 定时任务TimeJob

    转载自:https://blog.csdn.net/u013711462/article/details/53449799 定时任务 Pomelo.AspNetCore.TimedJob Pomelo ...

  10. （转）深入浅出Redis-redis哨兵集群

    背景:对于后台开发,需要了解与集群相关的工作. 深入浅出Redis-redis哨兵集群 Sentinel(哨兵)是Redis 的高可用性解决方案:由一个或多个Sentinel 实例 组成的Sentin ...