nth-child 与 nth-of-type 选择器的区别

<body>
<ul>
    <div><a href=""></a></div>
    <li class="bgred"></li>
    <li class="bgred"></li><!--内容改变-->
    <li class="bgred"></li>
    <li class="bgred"></li>
    <li class="bgred"></li>
</ul>
<ul>
    <li class="bggreen"></li>
    <li class="bggreen"></li><!--内容改变-->
    <li class="bggreen"></li>
    <li class="bggreen"></li>
    <li class="bggreen"></li>
</ul>
<script type="text/javascript">
    $(function(){
        $("li:nth-of-type(2)").text("OK");
    });
</script>
</body>

  li:nth-of-type 相当于将<ul>标签中的所有<li>元素选出,再将选出的<li>元素中排在第二位的<li>选中

<body>
<ul>
    <div><a href=""></a></div>
    <li class="bgred"><a href="a"></a></li><!--内容改变-->
    <li class="bgred"><a href="b"></a></li>
    <li class="bgred"><a href="c"></a></li>
    <li class="bgred"><a href="d"></a></li>
    <li class="bgred"><a href="e"></a></li>
</ul>
<ul>
    <li class="bggreen"><a href=""></a></li>
    <li class="bggreen"></li><!--内容改变-->
    <li class="bggreen"></li>
    <li class="bggreen"></li>
    <li class="bggreen"></li>
</ul>
<script type="text/javascript">
    $(function(){
        $("li:nth-child(2)").text("OK");
    });
</script>
</body>

  li:nth-child 相当于将<ul>标签中的所有块元素选出,再将选出的块元素中排在第二位的标签为<li>的元素选中。

时间: 2024-08-03 12:22:55

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

CSS的子选择器与后代选择器的区别

子选择器 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑器中的代码: .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li(水果.蔬菜)加入红色实线边框. <style type="text/css"> .food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ </style

类和ID选择器的区别

学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选择器只能在文档中使用一次.与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次.而类选择器可以使用多次. 下面代码是正确的: <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题

Css 后代选择器与子代选择器的区别

后代选择器用空格,比如A B{border:1px solid red;} 子代选择器用>, 比如A>B{border:1px solid red;} 但是,如果你仔细想想,这俩个概念是不是有重复的地方, 后代是不是也是子代? 子代不也是后代吗? 具体两者的关系不作讨论,我们来看看在css中具体有什么不同? 先上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

后代选择器和子元素选择器的区别

原文 简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选择器的相关概念 1.1.后代选择器 后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用. h1 em {color:red;} 1.2.子

css 中包含(后代)选择器与子选择器的区别

子选择器:即大于号(>),用于选择指定标签元素的第一代子元素..span>li{XXXX}. 包含(后代)选择器:即加入空格,用于选择指定标签的后辈元素..fisrt span{XXXX}. 注意:这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代.而后代选择器是作用于所有子后代元素.后代选择器通过空格来进行选择,而子选择器是通过">"进行选择. 总结:>作用于元素的第一代后代,空格作

CSS选择器中类和ID选择器的区别

类和ID选择器的区别 学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选择器只能在文档中使用一次.与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次.而类选择器可以使用多次. 下面代码是正确的: <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来

ABAP中TYPES与DATA、TYPE与LIKE 区别

1.TYPES与DATA区别: TYPES是用来自定义某种类(型)的,需(用DATA语句)实例化以后才可以使用 DATA 是用来声明基本类型数据对象(实例变量)的,对于用DATA直接定义的结构体对象(不参照其它结构类型) 参照自定义类型生成新数据语法格式如下:TYPES | DATA  ...... TYPE type1 .......        ''type1 代表程序内部类型 参照程序中已经声明的数据对象生成新数据语法格式如下:TYPES | DATA ...... LIKE dobj

jquery 中多条件选择器,相对选择器,层次选择器的区别

一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素,比如$("

CSS选择器和jQuery选择器的区别与联系

我们知道,jQuery选择器和CSS选择器的写法十分类似,都具有隐式迭代的特点,无需循环遍历符合选择器要求的每个元素,使用起来相对方便,通常,把css选择器用$("")包起来就成了一个jQuery选择器,如   CSS选择器 jQuery选择器 ID选择器 #myID $("myID") 类选择器 .myClass $(".myClass") 标签选择器 p $("p") 层次选择器 div > strong $(&qu