CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结

标签的情况

  • tag:nth-child(n):很好理解。1.各层级中的第n个元素;2.且该元素是tag

  • tag:nth-of-type(n):和上面不一样。1.在各层级中第n个出现的tag元素,与它是在父级下的第几个位置无关。

类的情况

  • .class:nth-child(n):和tag模式基本是一致的。1.各层级中的第n个元素;2.是class类

  • .class:nth-of-type(n):和tag模式就有些区别了。1.对层级中存在的标签,分别对应找出第n个出现的标签,2.是class类

示例代码


<html>
<head>
    <title>temdivtitle>
    <style>
        .item:nth-of-type(2){
            color:red;
        }
    style>
head>
<body>
    <span>1span>
    <div>2div>
    <div><span class="item">type111,child111span>div>
    <div><div class="item">type111,child111div>div>
    <div class="item">6div>
    <div>7div>
    <div class="item">8div>
    <span class="item">type222span>
    <div class="item">10div>
    <div>11div>
    <div class="item">12div>
    <span>13span>
    <div>
        <span>14span>
        <span class="item">type222,child222span>
        <span class="item">16span>
        <div class="item">type111div>
        <div class="item">type222div>
        <div class="item">19div>
    div>
body>
html>

你可能感兴趣的:(css,css3,css选择器)