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. Hyperledger Fabric 账本结构解析

    前言 现在很多人都在从事区块链方面的研究,作者也一直在基于Hyperledger Fabric做一些开发工作.为了方便后来人更快的入门,本着“开源”的精神,在本文中向大家讲解一下Hyperledger ...

  2. LeetCode-63.不同路径Ⅱ

    一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 现在考虑网 ...

  3. 笨办法学Python - 习题3: Numbers and Math

    目录 习题 3: 数字和数学计算 算术运算符 加分习题: 我的答案: 总结: 扩展: Python比较运算符 Python赋值运算符 Python位运算符 Python逻辑运算符 Python成员运算 ...

  4. 对 CasperJS 进行远程调试

    CasperJS运行在PhantomJS之上,其实也是启用PhantomJS的远程调试功能 PhantomJS 是一个无图形界面的浏览器,它支持各种Web标准:DOM处理,CSS选择器,JSON,Ca ...

  5. MCS锁——可伸缩的自旋锁

    在编写并发同步程序的时候,如果临界区非常小,比如说只有几条或几十条指令,那么我们可以选择自旋锁(spinlock).使用普通的互斥锁会涉及到操作系统的调度,因此小临界区一般首选自旋锁.自旋锁的工作方式 ...

  6. chage命令详解

    基础命令学习目录首页 原文链接:https://www.jb51.net/article/78693.htm linux chage命令简介: chage命令用于密码实效管理,该是用来修改帐号和密码的 ...

  7. PHP 抽象类和接口区别

    php中抽象类和接口的区别 1) 概念 面向对象的三大概念:封装,继承,多态 把属性和方法封装起来就是类.      一个类的属性和方法被另外的类复制就是继承,PHP里面的任何类都可以被继承,被继承的 ...

  8. js中if else switch 条件判断的替代方法

    function condition(test){ return({ cat :function(){console.log('cat');}, dog :function(){console.log ...

  9. 作业 20181127-3 互评Beta版本

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2448 组名:可以低头,但没必要 组长:付佳 组员:张俊余 李文涛 孙赛佳 ...

  10. 2018软工实践—Beta冲刺(1)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Beta 冲鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调组内工作 调试服务器性能 展示GitHub当日代码/文档签入记录(组内 ...