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>

效果图：

前端学习 --Css -- 子元素的伪类的更多相关文章

  1. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  2. 学习css常用基本层级伪类属性选择器

    常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...

  3. 前端学习 -- Css -- 兄弟元素选择器

    为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...

  4. css 选择器 & UI元素的伪类选择器 & 伪元素选择器

    UI元素的伪类选择器 1. :focus  用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable  用来指定元素处于不可用时的状态    表单里应用 ...

  5. CSS伪元素与伪类的区别

    伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...

  6. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

  7. 前端学习——css基础知识，选择器与html模板、值得收藏的html标签

    一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...

  8. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  9. 动态修改 dom 元素的伪类样式

    最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / ...

随机推荐

  1. 使用yum安装文件时提示安装文件重复问题2:nodejs-10.15.3-1nodesource.x86_64: [Errno 256] No more mirrors to try.

    原因:yum命令缓存问题 解决办法: sudo yum clean all

  2. WebSocket抓包分析

    转载自:https://www.cnblogs.com/songwenjie/p/8575579.html Chrome控制台 (1)F12进入控制台,点击Network,选中ws栏,注意选中Filt ...

  3. FinTech领域实践：乐维监控助力西南某上市城商行IT运维转型升级！

    FinTech领域实践:乐维监控助力西南某上市城商行IT运维转型升级! 项目背景 随着信息化的逐步深入,企业业务运营活动对IT的依赖程度越来越高,传统的局部.粗放.碎片化的IT运维管理模式已经无法满足 ...

  4. Streamr助你掌控自己的数据(3)——教你在Streamr市场上发布数据

    博客说明 所有刊发内容均可转载但是需要注明出处. 教你在Streamr市场上发布数据 本系列文档主要介绍怎么通过Streamr管理自己的DATA,整个系列包括三篇教程文档,分别是:教你5分钟上传数据至 ...

  5. js最简单的动画

    $(document).ready(function(){ //�ֶ�����ҳ��Ԫ�� $("#reset").click(function(){ $("*" ...

  6. First Scrum Meeting （2015/10/18）

    会议是在昨晚进行的,本来早就应该写博了,可惜今天校园网炸个不停= =.刚修好就赶紧来发博客. 会议基本要素 会议主题:爬虫项目的核心技术讨论以及项目初期的工作分配 会议时间:2015.10.18 19 ...

  7. 炸弹人 之 N A B C D

    团队开发之个人——NABCD理解 项目名称:炸弹人(app)N(need):    随着移动终端的发展,各类软件的需求必然会有长期的需求,而游戏类软件是不同年龄阶段的人共同的需求,我们将要开发的这款游 ...

  8. WebGL学习笔记四点二

    前几章对图形图形内部多是 以纯色填充,但是现实中已经有许多好的图片了我们没必要一点点画,这一章第五章就是将图片以纹理的形式加载到片元中,主要过程如下,首先是定义点的坐标的attribute变量用于在j ...

  9. 第二篇——VC++简单随机四则运算

    目标:编写最简单的四则运算,类似A+B=C: 想法:建立一个Win32控制台应用程序,A和B用随机数表示,运算符号用0~3的数字对应,然后计算并输出即可: 具体过程: 利用函数rand(),返回一个0 ...

  10. POJ 2104 K-th Number 主席树(区间第k大)

    题目链接: http://poj.org/problem?id=2104 K-th Number Time Limit: 20000MSMemory Limit: 65536K 问题描述 You ar ...