前端学习 --Css -- 子元素的伪类

简介: :first-child 寻找父元素的第一个子元素,在所有的子元素中排序;:last-child 寻找父元素的最后一个子元素,在所有的子元素中排序;:nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序;:first-of-type 寻找指定类型中的第一个子元素:last...
  1. :first-child 寻找父元素的第一个子元素,在所有的子元素中排序;
  2. :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序;
  3. :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序;
  4. :first-of-type 寻找指定类型中的第一个子元素
  5. :last-of-type 寻找指定类型中的最后一个子元素
  6. :nth-of-type 寻找指定类型中的指定子元素

    可以使用even,来找到偶数的子元素

    可以使用odd,来找到奇数的子元素

demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*:first-child 寻找父元素的第一个子元素,在所有的子元素中排序;*/
            P:first-child{
                color: #ADFF2F;
            }
            /*:last-child 寻找父元素的最后一个子元素,在所有的子元素中排序;*/
            P:last-child{
                color: #008000;
            }
            /*:nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序;*/
            P:nth-child(3){
                color: #FFFFFF;
                background-color: #000000;
            }
            /*:first-of-type 寻找指定类型中的第一个子元素*/
            h3:first-of-type{
                color: red;
            }
            /*:last-of-type 寻找指定类型中的最后一个子元素*/
            h3:last-of-type{
                color: green;
            }
            /*:nth-of-type 寻找指定类型中的指定子元素*/
            h3:nth-last-of-type(2){
                color: yellow;
            }
            
            /*可以使用even,来找到偶数的子元素
            可以使用odd,来找到奇数的子元素*/
            h4:nth-last-of-type(even){
                color: red;
            }
            
            h4:nth-last-of-type(odd){
                color: green;
            }

        </style>
    </head>
    <body>
        <p>有时关切是问,有时关切是不问。</p>
        <h3>----我是分割线1----</h3>
        <p>这样水波不兴,你好我也好。</p>
        <h3>----我是分割线2----</h3>
        <p>山还是山,水还是水,生活和工作终会照旧。</p>
        <h3>----我是分割线3----</h3>
        <p>希望观念的改变能留得长久些:敬天悯人,相信人心</p>
        <h3>----我是分割线4----</h3>
        <br/>
        <br/>
        <br/>
        
        <h4></h4>
        <h4>你眼睛的面积一定小于湖  </h4>
        <h4>你也很少哭  </h4>
        <h4>为什么坐在你面前 </h4>
        <h4>就像站在湖边</h4>
        <h4>细细的雾水就扯地连天 </h4>
    </body>
</html>

效果图:

 

相关文章
|
5天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
15 4
|
12天前
|
JavaScript 前端开发 NoSQL
前端node如何学习进阶知识
【7月更文挑战第8天】 深化JavaScript基础,精通Node.js核心模块(如fs、http)与事件循环机制,学习Express框架及异步编程(回调、Promise、async/await),掌握数据库交互,参与实战项目,关注Node.js最新技术和最佳实践,以此提升进阶技能。
24 8
|
7天前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
23 0
学习css的clip-path属性
|
17天前
|
前端开发 JavaScript 开发工具
给前端小白的学习建议
【7月更文挑战第4天】 **前端新手入门指南:** - 明确目标,从HTML/CSS基础开始。 - 深入学习JavaScript,结合项目实战。 - 跟踪技术趋势,选一二框架钻研。 - 多实践,从小项目到复杂应用。 - 掌握开发工具与调试技巧。 - 培养解决问题的能力,保持好奇与耐心。 - 加入社区,分享交流,持之以恒,成为优秀前端开发者。
15 2
|
18天前
|
前端开发 安全 JavaScript
学习前端加密
【7月更文挑战第3天】前端加密保护数据安全,防止传输中被截获,提升用户体验。HTTPS基础保障,JavaScript库如CryptoJS辅助加密,Web Crypto API提供原生加密功能。但前端加密非万能,需结合后端措施,注意算法选择、密钥管理。
16 2
|
14天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
15 0
|
19天前
|
前端开发 JavaScript UED
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
20 0
|
19天前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
21 0
|
19天前
|
前端开发
前端 CSS 经典:模拟 material 文本框
前端 CSS 经典:模拟 material 文本框
11 0
|
19天前
|
前端开发
前端 CSS 经典:图层放大的 hover 效果
前端 CSS 经典:图层放大的 hover 效果
12 0