今天阅读《锋利的jQuery》第二版2.6节案例研究部分的时候,遇到一个问题。

<ul>
  <li class="a1"><a href="#">佳能</a><span><li>30440</li></span></li>
  <li class="a1"><a href="#">索尼</a><span><li>27220</li></span></li>
  <li class="a1"><a href="#">三星</a><span><li>20808</li></span></li>
  <li class="a1"><a href="#">尼康</a><span><li>17821</li></span></li>
  <li class="a1"><a href="#">松下</a><span><li>12289</li></span></li>
  <li class="a1"><a href="#">卡西欧</a><span><li>8242</li></span></li>
  <li class="a1"><a href="#">富士</a><span><li>14894</li></span></li>
  <li class="a1"><a href="#">柯达</a><span><li>9520</li></span></li>
  <li class="a1"><a href="#">宾得</a><span><li>2195</li></span></li>
  <li class="a1"><a href="#">理光</a><span><li>4114</li></span></li>
  <li class="a1"><a href="#">奥林巴斯</a><span><li>12205</li></span></li>
  <li class="a1"><a href="#">明基</a><span><li>1466</li></span></li>
  <li class="a1"><a href="#">爱国者</a><span><li>3091</li></span></li>
  <li class="a1"><a href="#">其他品牌相机</a><span><li>7275</li></span></li>
</ul>

我在这里犯了一个错误:误把<li></li>里面的<i></i>写作li。当我对其应用下面的样式的时候,出现了如图的情形:

ul>li:nth-of-type(3n){
  background-color: #F7EED6;
  margin: 10px;
}

ul>li:nth-of-type(3n+1){
  background-color:#b0a4e3;
  margin: 10px;
}
ul>li:nth-of-type(3n+2){
  background-color:#00aeef;
  margin: 10px;
}

本来应该对ul的子元素li应用的样式在计算的时候把ul后代里所有的li都计算进去了。如果我们对ul>li应用样式改变它的字体大小,也会发生同样的情况。

ul/ol元素内部嵌套的li,如果没有包裹在另外一个ul或者ol里面,全部都会计算成该ul/ol的子元素。下次不要犯这个错误啦。

关于li元素嵌套的事儿的更多相关文章

  1. WEB标准系列-HTML元素嵌套

    转:http://www.smallni.com/element-nesting/ 先来看以下这样一段代码: <ul> <li><h4><a href=&qu ...

  2. HTML(二)HTML元素(整体结构,块级元素,内联元素,结构元素,交互元素,元素嵌套规则)

    HTML整体结构解释 <!DOCTYPE html> // 文件应以"<!DOCTYPE ......>"首行顶格开始,推荐使用"<!DOC ...

  3. HTML块元素与内联元素嵌套规则

    HTML存在许多种类型的标签,有的标签下面只允许特定的标签存在,这就叫HTML嵌套规则.不按HTML嵌套规则写,浏览器就不会正确解析,会将不符合嵌套规则的节点放到目标节点的下面,或者变成纯文本.关于H ...

  4. 在li元素中放入img图片时li的高度问题

    在li元素中放入img图片时li的高度会比img图片的高度多出几个像素,解决这个问题只需要将img元素的css设置成vertical-align: middle;就可以解决.

  5. 使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JavaScript 操作选中当前的li元素并给他添加select类

    JavaScript 操作选中当前的li元素并给他添加select类.之前都是使用jquery写的,今天使用JavaScript写一个. <!DOCTYPE html> <html ...

  8. 二级ul li元素动态加载click事件

    一.代码 html代码: <ul class="id1" id="id1" style="width:84%; height:75%;overf ...

  9. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

随机推荐

  1. [译]Thinking in React

    编者按 使用React的思想来构建应用对我在实际项目中以及帮助他人解决实际问题时起到了很大作用,所以我翻译此文来向那些正在或即将陷入React或React-Native深坑的同胞们表示慰问.网上已经有 ...

  2. 基于TQ2440的SPI驱动学习(OLED)

    平台简介 开发板:TQ2440 (NandFlash:256M  内存:64M) u-boot版本:u-boot-2015.04 内核版本:Linux-3.14 作者:彭东林 邮箱:pengdongl ...

  3. O(1)效率的表面模糊算法优化。

    很久没有写文章了,主要是最近一段时间没有以前那么多空暇空间,内存和CPU占用率一致都很高,应前几日群里网友的要求,今天发个表面模糊的小程序来找回之前写博客的热情吧. 国内我认为,破解表面模糊的原理的最 ...

  4. [转载]fullPage.js中文api 配置参数~

    fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...

  5. 怎么实现ZBrush 4R7中界面视窗的快速转换

    本篇教程介绍ZBrush® 4R7界面的基本操作之转换界面视窗, 教程属于入门教程可以帮助新手快速入门.因为ZBrush工 作界面不同于其他我们所熟知的3D软件,初次接触ZBrush的时候难免会有所困 ...

  6. mysql workbench如何把已有的数据库导出ER模型

    mysql workbench的特长是创建表结构的,然后在结构图中,圈圈点点,很容易就利用可视化方式把数据库建好,然后再导入到数据库服务器中,这种办法很效率.但是有时我们有一个需求,事先没有建表结构模 ...

  7. MVC 数据验证

    MVC 数据验证 前一篇说了MVC数据验证的例子,这次来详细说说各种各样的验证注解.System.ComponentModel.DataAnnotations 一.基础特性 一.Required 必填 ...

  8. [LeetCode] Find Minimum in Rotated Sorted Array II 寻找旋转有序数组的最小值之二

    Follow up for "Find Minimum in Rotated Sorted Array":What if duplicates are allowed? Would ...

  9. form 表单跨域提交

    <!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...

  10. 解决UINavigationController在pushViewController时出现的"卡顿"问题

    进行开发中,遇到了个小问题: 在使用UINavigationController的-pushViewController:animated:执行入栈一个子控制器操作时(即最新栈顶子控制器),会出现推出 ...