CSS-伪类子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类子代选择器</title>
    <style>
        *{
            margin: 0; /*外边距,盒子与盒子之间的距离*/
            padding: 0; /*内间距,盒子内部的内容与盒子边框的距离*/
        }
        .outer{
            border: 1px solid red;/*边框线的宽度 样式:实线 颜色*/
        }
        .inner{
            width: 100px;
            height: 150px;
            border: 1px solid blue;
        }
        /*使用:first-child选择第一个子元素*/
        div:first-child{
            /*border: 2px solid green;*/
        }
        /*使用:first-child选择最后一个子元素*/
        p:last-child{
            /*border: 2px solid green;*/
        }
        /*选择独生子*/
        :only-child{
            /*border: 2px solid green;*/
        }
        /*选择第几个孩子    odd奇数   even偶数*/
        div *:nth-child(3n+2){
            /*border: 2px solid green;*/
        }
        div#two *:nth-last-child(odd){
            /*border: 2px solid green;*/
        }
        /*选择每种类型中的第一个*/
        div#two *:first-of-type{
            /*border: 2px solid green;*/
        }
        /*选择每种类型中的最后一个*/
        div#two *:last-of-type{
            /*border: 2px solid green;*/
        }
        /*选择每种类型中的第几个*/
        div#two *:nth-of-type(4){
            /*border: 2px solid green;*/
        }
        /*选择每种类型中的倒数第几个*/
        div#two *:nth-last-of-type(4){
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <span>hello</span>
            <span>hello</span>
        </div>
        <div class="inner" id="two">
            <span>hello1</span>
            <span>hello2</span>
            <span>hello3</span>
            <span>hello4</span>
            <span>hello5</span>
            <span>hello6</span>
            <span>hello7</span>
            <span>hello8</span>
            <p>你好<span>world</span></p>
            <p>你好<span>world</span></p>
        </div>
        <div class="inner">
            <p>你好</p>
        </div>
        <div class="inner"></div>
        <p>你好</p>
        <p>你好</p>
        <span class="spanOne">hello</span>
        <span>hello</span>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值