:nth-child

匹配其父元素下的第N个子或奇偶元素

:eq(index) 匹配选择器指定序列的元素,而这个将为每一个父元素匹配子元素。

:nth-child从1开始的,而:eq()是从0算起的!可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

要匹配元素的序号,从1开始

示例

描述:

在每个 ul 查找第 2 个li

HTML 代码:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:nth-child(2)")
结果:
[ <li>Karl</li>,   <li>Tane</li> ]
时间: 2024-10-13 19:50:46

:nth-child的相关文章

IE6/7兼容伪类、IE9以下兼容颜色渐变、IE8以下兼容nth:child(n)

1.IE6/7兼容伪类 _1.CSS部分:一个有冒号,一个是空格分隔.前者IE8+及其他现代浏览器:后者为IE6-7准备的 #test:before, #test before{ content: attr(data-content); width: 0; height: 0; } _2.HTML部分 <div id="test"  data-content=""></div> 设置content _3.JS部分 设置IE6/7 var $b

HTML5-CSS面试题

[1]介绍一下CSS的盒子模型? (1)有两种, IE 盒子模型.标准 W3C 盒子模型:IE的content部分包含了 border 和 pading; (2)盒模型: 内容(content).填充(padding).边界(margin). 边框(border). [2]CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些? 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选择器(h1 

CSS Selectors

Table of Contents Universal Selector Element Selector Class Selector ID Selector Attribute Selector Attribute Equals Attribute Begins With Attribute Begins With Language Code Attribute Ends With Attribute Contains Attribute Contains Word Group Select

使用vue.js仿一个链家

Vue全家桶+localstorage+socket.io简单仿一个链家 在线预览地址首先上项目和预览地址 https://luxroid.com/lianjia/#/Github地址 https://github.com/mixihome/lianjia 注意 如果要在本地运行安装完依赖之后如果报错请手动使用淘宝镜像安装node-sass和sass-loader 确保可以运行建议使用F12移动端模式预览???? 使用到的技能点Vue.js : 前端页面展示Vuex : 全局状态通信axios

前端试题整理

阻止事件冒泡和默认事件 function stopBubble(e) { if(e && e.stopPropagation){ e.stopPropagation(); } else { window.event.cancelBubble = true; } }; // 阻止浏览器的默认事件 function stopDefault(e){ if(e && e.preventDefault) { e.preventDefault(); } else { window.ev

web前端面试题总结

HTML Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1).<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前.告知浏览器的解析器,      用什么文档类型 规范来解析这个文档.  (2).严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行. (3).在混杂模式中,页面以宽松的向后兼容的方式显示.模拟老式浏览器的行为以防止站点无法工作. (4).DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现. 行内元素有哪

simple_html_dom使用小结

simple_html_dom使用小结 分类: PHP2012-08-31 14:24 3094人阅读 评论(0) 收藏 举报 htmlcallbackstringdivfunctionfile 1.文件夹结构如下: php解析html页面工具 simple html dom 使用的简单介绍: (1)下载( http://sourceforge.net/projects/simplehtmldom/files/) : (2)解压,manual目录是使用文档(很容易看懂的,也可以看这里http:/

simple_html_dom(3)

How to traverse the DOM tree? // If you are not so familiar with HTML DOM, check this link to learn more... // Exampleecho $html->find("#div1", 0)->children(1)->children(1)->children(2)->id;// or echo $html->getElementById(&quo

Doctype作用,标准模式与兼容模式的区别

<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现.   标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行.在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作. HTML5 为什么只需要写 <!DOCTYPE HTML>? HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需

最基础的CSS面试题

1.Doctype作用是什么?严格模式与混杂模式分别是如何触发这两种模式的,区分它们有何意义? (1)<!DOCTYPE>声明位于文档中的最前面,处于<html>标签之前.告知浏览器的解析器,用什么文档类型规范来解析这个文档. (2)严格模式的排版和JavaScript运作模式是以该浏览器支持的最高标准运行. (3)在混杂模式中,页面以宽松的向后兼容的方式显示.模拟老式浏览器的行为以防止站点无法工作. (4)DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现. 2. 行内元素