nth-child和nth-of-type

<section>
    <div>我是一个普通的div标签</div>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

p:nth-child(2){color:red;} ---选择其父节点下的第二个元素,并且该元素是p 标签                            p:nth-of-type(2){color:red;} ---选择其父节点下的第二个元素

预览:                                                                                                                               预览:

                                                                                 

使用nth-of-type 会比较好些,比较直观

时间: 2024-10-06 16:36:46

nth-child和nth-of-type的相关文章

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

html自定义表白网页

今天给同学弄了一下简单表白网页 : 首先祝福两位少年同学 现在重点讲一下我是弄的 先新建一个记事本 然后写入下面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html > <head> <meta http-equiv=

j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt

立即执行函数(IIFE)的理解与运用

作为JavaScript的常用语法,立即执行函数IIFE(Immediately-Invoked Function Expression)是值得我们认真去学习探究的. 一.创建函数的两种方式 我们先从基础讲起,要创建一个JS函数,有两种方式. (一)函数定义(Function Declaration) function Identifier ( Parameters ){ FunctionBody } 函数定义中,参数(Parameters)标识符(Identifier )是必不可少的.如果遗漏

js控制TR的显示影藏

在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,(div的影藏显示类似) 以下是一段选择是的按钮就显示身高和体重的文本框的代码.注意:ready方法必须要引用jquery的库. 1.html Code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

Sizzle.filter [ 源码分析 ]

最近一直在研究Sizzle选择器,对于其中的原理确实不得不佩服! Sizzle中的filter方法,主要负责块表达式过滤元素集合,在方法内部会调用Sizzle.selector.fitler方法执行过滤操作. Sizzle.filter主要分5个关键步骤: 1 使用LeftMatch确定表达式类型. 2 调用Sizzle.selectors.preFilter预过虑函数,执行过滤前的修正. 3 调用Sizzle.selectors.filter[ type ] 中对应的过滤函数,执行过滤操作,如

ASP.NET onkeyup 添加GridView行

HTML <table class="borderedTable" cellspacing="0" rules="all" border="1" id="tblInspectionResult" style="width: 99%; border-collapse: collapse;"> <tr> <td class="TDTitle"

jQuery1.4源码解读

/*! * jQuery JavaScript Library v1.4 * http://jquery.com/ * * Copyright 2010, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://docs.jquery.com/License * * Includes Sizzle.js * http://sizzlejs.com/ * Copyright 2010, The Doj

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

jQv1.5源代码重读

/*! * jQuery JavaScript Library v1.5 * http://jquery.com/ * * Copyright 2011, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * Includes Sizzle.js * http://sizzlejs.com/ * Copyright 2011, The Dojo Fou