undefined

css3结构选择器

发表于 | 分类于 ， ，
字数统计: 630 | 阅读时长 ≈ 3

结构性伪类

nth-child() 找到父级下第几个子节点

表示 含义
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素的最后一个子节点
E:first-of-type 表示E元素中的第一个子节点且节点类型是E
E:last-of-type 表示E元素中的最后一个子节点且节点类型是E的
E:only-child 表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E.注意：子节点不包含文本节点
E：empty 表示E元素中没有子节点。注意：子节点包含文本节点 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    p {
        height: 30px;
        border: 1px solid #000;
    }

    p:nth-child(odd) {
        background: red;
    }
    /*p:nth-child(2)找到父级下的第二个子元素，并且这个元素还得是p标签
    body:*:nth-child(2)找到body下第二个子节点，不管是什么标签
	p:nth-last-child(2)   从后往前数
	p:nth-of-type(2)  找到父级下的第二个p类型的标签
	p:nth-of-last-type(2)  从后往前找
    */
    </style>
</head>

<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
</body>

</html>

例子：新浪新闻导航头部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .list li {
        width: 150px;
        border: 1px solid #000;
        float: left;
    }

    .list li:last-of-type {
        border: none;
    }

    .list a {
        float: left;
        width: 40px;
        margin: 0 5px;
        font: 12px/30px "宋体";
        text-align: center;
    }

    .list li a:nth-of-type(3n+1) {
        font-weight: bold;
    }

    .list li:ntn-child(3) a:nth-child(2) {
        color: red;
    }
    </style>
</head>

<body>
    <ul class="list">
        <li>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
        </li>
        <li>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
        </li>
        <li>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
        </li>
        <li>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">新闻</a>
        </li>
    </ul>
</body>

</html>

觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多