登录  /  注册
博主信息
博文 14
粉丝 0
评论 0
访问量 6257
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
css选择器,与伪类选择器的用法和使用场景,2019年4月26日12点15分
蔡小逗
原创
1163人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

    /*//选中父元素的第5个元素*/
    div :nth-child(5){
        color: #00aaaa;
        background-color: lightgreen;
    }
    /*//选中父元素的第二个元素,如果是li*/
    li:nth-child(2){
    color: #00aaaa;
    background-color: lightblue;
}
/*//选中父元素的第一个元素,如果是p执行下列样式*/
    p:nth-child(1){
    color: #00aaaa;
    background-color: lightpink;
    }

    p:nth-child(2){ /*选中父元素的第二个元素p标签,如果不是p标签则无效果 */
    color: #00aaaa;
    background-color:lightcoral;
        font-size: 25px;
    }

      li:nth-child(3){ /* 选中父元素的第三个元素li标签,如果不是li标签则无效果,我们这里是li就有效果*/
      color: #00aaaa;
      background-color: lightgrey;
    }
  :nth-of-type(3){/*//选中有同一类型有三个元素的第三个给背景色和字体颜色*/
    color: #f0ecf7;
    background-color:lightsalmon;
    font-family: '楷体';
    }
form{
    width: 600px;
    height: 800px;
    margin: 0px auto;
}
label,input{
    width:250px;
    height: 20px;
}
    input:first-of-type:focus{
        background-color:lightcyan;
        color:lightsalmon;
    }
    input:nth-of-type(2):hover{
        background-color:lightcyan;
        color:lightsalmon;
    }
</style>
<body>
<div class="dox">
    <ul>

        <p>标题一(第一个p标签),div下边第一个元素</p>
        <li>第一个li标签,div下边第二个元素</li>
        <li>第二个li标签,div下边第三个元素</li>
        <li>第三个li标签,div下边第四个元素</li>
        <li>第四个li标签,div下边第五个元素</li>
        <p>第二个P标签,div下边第六个元素</p>
        <p>第三个p标签,div下边第七个元素</p>
        <p>第四个p标签,div下边第八个元素</p>
        <b>第一个b标签,div下边第九个元素</b>
        <b>第二个b标签,div下边第十个元素</b>
        <b>第三个b标签,div下边第十一个元素</b>
    </ul>
    <form action="">
        <label for="one">演示焦点伪类:</label>
        <input type="text" name="cc" id="one"><br>
        <p></p>
        <p></p>
        <label for="two">演示链接悬浮:</label>
        <input type="text" name="cc" id="two">

    </form>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

微信截图_20190426111227.png

微信截图_20190426113926.png

微信截图_20190426113941.png


 <!--nth-child(n)选择器匹配属于其父元素的第 N 个子元素,不论元素的类型-->
    <!--nth-of-type(n) 选择器,该选择器选取父元素的第 N 个指定类型的子元素 不指定的时候会选取页面上的所有拥有第n个的元素
     切记空格的使用,不指定类型或者其他的时候不填,指定父类必须加空格-->

        伪类选择器使用起来更快速便捷,而且对用户更友好,使网站体验更好,
    

批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学