12.序选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p:first-child{*/
        /*    color: red;*/
        /*}*/
        /*p:last-child{*/
        /*    color: red;*/
        /*}*/
        /*p:nth-child(2){*/
        /*    color: red;*/
        /*}*/
        /*p:nth-last-child(3){*/
        /*    color: red;*/
        /*}*/
        /*p:only-child{*/
        /*    color: red;*/
        /*}*/
        p:only-of-type{
            color:red;
        }



    </style>
</head>
<body>

<!--
    序选择器分为两大类:
1.针对于同级别的:
    p:first-child:查找与p同级别的第一个标签，如果是仍然是p标签，就设置
    p:last-child
    p:nth-child(2):正数
    p:nth-last-child(3)：倒数
    p:only-child:选择与p同级别的，并且这个级别只有一个标签


2.针对于同类型并且同级别的:
    p:first-of-type:查找与p同级别且同类型的标签
    p:last-of-type
    p:nth-of-type(3)
    p:nth-last-of-type(3)
    p:only-of-type：与p同级别的且同类型的只有一个，也就是说这个级别，只有一个p标签
-->

<h1>我是标题1</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
<h1>我是标题2</h1>

<h1>我是标题1</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落5</p>
    <h1>我是标题3</h1>

</div>
<h1>我是标题2</h1>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-序选择器 下</title>
    <style>
        p:nth-of-type(3n){
            color: red;
        }
    </style>
</head>
<body>

<!--
1.同级别
p:nth-child(odd):选中同级别的奇数标签
p:nth-child(even)
p:nth-child(xn-y):n为0到正无穷大，x和y可以是正整数也可以是负整数，但必须是整数，小数无效

2.同级别且同类型
p:nth-of-type(odd)
p:nth-of-type(even)
p:nth-of-type(xn+y)
-->

<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
<p>我是段落9</p>
<p>我是段落10</p>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。