zoukankan      html  css  js  c++  java
  • css中关于:nth-child()和:nth-of-type()的深入理解

    css中关于:nth-child()和:nth-of-type()的深入理解

    在css中有这样一类属性,是以:nth-开头的,其中最常见的就是:nth-child() 和 :nth-of-type(),两者既有相同的地方,也有不同的地方。

    • 相同的地方:都是修改父级下的的几个同级的元素的样式
    • 不同的地方::nth-child()是修改父元素下的同级元素的第n个元素内的样式,但是:nth-of-type()是修改父元素下的同级元素的第n个同类型元素的样式。例如:p:nth-of-type(2)就是修改p元素的父级元素下的与p同级的第二个p元素的样式;p:nth-child(2)就是修改p元素的父级元素下的与p同级的第二个元素的样式。
    <style>
    		/* 修改body下面的第二个元素的样式,注意是同级元素**/
    		body :nth-child(2) {
    			color: red;
    		}
    		/* 修改body下面的每一种元素的第二个元素的样式,注意是同级元素*/
    		body :nth-of-type(2) { 
    			color: green;
    		}
    	</style>
    
    <body>
        <a href="#">测试a</a>
        <div>测试div</div>
        <p>测试p</p>
        <a href="#">测试a</a>
        <div>测试div</div>
        <p>测试p</p>
        <b>测试b</b>
        <div>测试div</div>
        <p>测试p</p>
        <a href="#">测试a</a>
        <b>测试b</b>
    	<p>测试p</p>
    </body>
    

    结果如下:

  • 相关阅读:
    Azureus 3.0.0.8
    KchmViewer 3.0
    GNOME 2.18.0 正式版颁发宣布
    Emacs 22.0.95
    gTwitter:Twitter 的 Linux 客户端
    KDE DVD Authoring Wizard-易用的 DVD 制造器材
    GIMP 2.3.15
    Monit-零碎看监工具
    Cobras-专注于 Qt 的 IDE
    K3b 1.0 正式版公布
  • 原文地址:https://www.cnblogs.com/JonnyJiang-zh/p/13497384.html
Copyright © 2011-2022 走看看