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. 企业服务总线ESB

    # 企业服务总线ESB 由中间件技术实现并支持SOA的一组基础架构,支持异构环境中的服务.消息以及基于事件的交互,并且具有适当的服务级别和可管理性. 通过使用ESB,可以在几乎不更改代码的情况下,以一 ...

  2. linux-shell-screen后台调用-后台运行脚本和命令-仿start命令-伪窗口界面

    序 我比较熟练bat.cmd脚本.刚接触使用shell时,总会习惯想用windows窗口界面来套用shell脚本.于是找到screen后台命令,它可以交互shell脚本,保持后台运行.但是在批处理ba ...

  3. CentOS7安装VMware Tools

    安装依赖包 [root@localhost ~]# yum -y install perl gcc gcc-c++ make cmake kernel kernel-headers kernel-de ...

  4. spring-boot+swagger实现WebApi文档

    1.引用依赖包 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-s ...

  5. python2.6更改为Python2.7

    文中为Python2.6.6,改为Python2.6即可,因为没有/usr/bin/python2.6.6,只有/usr/bin/python2.6 http://blog.csdn.net/jcjc ...

  6. 详细教你实现BST(二叉排序树)

    查找基本分类如下: 线性表的查找 顺序查找 折半查找 分块查找 树表的查找 二叉排序树 平衡二叉树 B树 B+树 散列表的查找 今天介绍二叉排序树. 二叉排序树 ( Binary Sort Tree ...

  7. PSP Daily新增功能说明书

    1.选择输入类别时可以记录原来的输入,支持用户选择记录清空功能 2.添加“恢复最近”button,点击这个按钮可以跳出一个页面显示最近的excel记录,用户可以通过勾选相应的excel文件名,恢复选中 ...

  8. HDU3629(凸四边形的个数)

    HDU 3629 计算几何 题目描述:给你n个点(4~700), 问你能够成多少个不同的凸四边形. 解题报告: 暴力的话C(700,4)必然超时,发现,任何一个凹包必然是其中一点在其它3点构成的三角形 ...

  9. 停止ipv6

    在Centos5.5默认的状态下,ipv6是被启用的.因为我们不使用ipv6,所以,可以停止ipv6,以最大限度地保证安全和快速.首先确认一下ipv6是不是处于被启动的状态.［root@sample ...

  10. 10th 规格说明书练习——吉林一日游

    活动规格说明书 吉林市一日游 版本:1.0 编订:王东涵 团队:2016级计算机技术全体同学 日期:2016-11-20 目录 1．引言 1.1 编写目的 1.2 背景 1.3 定义 1.4 参考资料 ...