dom结构伪类选择器

 

a.  结构伪类选择器是直接作用于:前面的元素 然后相对与父元素来说的 与前置元素无关 前置元素只是起定义位置的作用（上述表格中的E F结构描述的不够清楚）

eg：

ul子元素中 第二个元素，且该元素必须为div标签 否则不匹配。

ul > div:nth-child(2){
    background: blue;}

ul后代元素中 每个dom层级中排第二位的元素  且该元素需为div
ul  div:nth-child(2){
    background: blue;}

所有层级中排第二位的div元素
div:nth-child(2){
    background: blue;}

b.:nth-of-type  和 :nth-child的区别是

：nth-child 是将各层级所有的元素进行排序
：nth-of-type 是将各层级的所有：前面的元素进行排序


 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dom选择器</title>
</head>
<style>
    ul{
        list-style: none;

    }
    ul li:first-child,ul li:last-child{
        background: red;

    }
    ul > li:nth-child(2){
        background: yellow;
    }
    ul  > div:nth-child(3){
        background: gray;
    }
    ul  div:nth-child(2){
        background: blue;
    }
    ul  div:nth-child(1){
         background: green;
     }
    /*ul  div:nth-child(1){*/
    /*     background: black;*/
    /* }*/
</style>
<body>
<ul>
    <div>0
    <div>01

    </div><div>02</div><div>03</div></div>
    <div>1
    <div>11

    </div><div>12</div></div>
    <div>2</div>
    <li>1

    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

　　

posted @ 2019-04-08 10:13  monstermr  阅读(220)  评论(0)    收藏  举报