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. Deep learning for visual understanding: A review 视觉理解中的深度学习：回顾 之一

    Deep learning for visual understanding: A review 视觉理解中的深度学习:回顾 ABSTRACT: Deep learning algorithms ar ...

  2. POJ 3164 Sunscreen （挑战程序设计竞赛的练习题）

    题目:https://vjudge.net/problem/POJ-3614 思路参考这个:https://blog.csdn.net/qq_25576697/article/details/7657 ...

  3. python-分叉树枝

    import turtle def draw_branch(length): #绘制右侧树枝 if length >5: if length == 10: turtle.pencolor('gr ...

  4. Python函数初识

    一.函数是什么 ​ 计算机语言中的函数是类比于数学中的函数演变来的,但是又有所不同.前面的知识中我们学会了运用基础语法(列表.字典)和流程控制语句貌似也能处理一些复杂的问题,但是相对于相似的大量重复性 ...

  5. JVM调优(2)

    堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...

  6. 必应词典手机版(IOS版)与有道词典(IOS版)之软件分析【功能篇】【用户体验篇】

    1.序言: 随着手机功能的不断更新和推广,手机应用市场的竞争变得愈发激烈.这次我们选择必应词典和有道词典的苹果客户端作对比,进一步分析这两款词典的客户端在功能和用户体验方面的利弊.这次测评的主要评测人 ...

  7. AbstractFactory（PeopleSkin）

    使用抽象工厂模式,完成下述产品等级结构: 实现 UML类图 public class BlackFactory implements MWFactory{ public Man produceMan( ...

  8. 《Spring1之第九次站立会议》

    <第九次站立会议> 昨天:对用C#写的视频功能进行了相关的了解. 今天:试着把用C#写的代码转换为java语言. 遇到的问题:说实话,真心不好转换,转换过程中遇到了很多问题.

  9. object-oriented second work

    work request github enter 这次作业做过,不过以前是用数组写的,当我用双向链表写这题时,刚交上去一直出错,后面我又改了改,最后一点一致凑,后面有同学告诉我在构建链表后要判断链表 ...

  10. JAVA对象的初始化过程

    出处:http://blog.csdn.net/andrew323/article/details/4665379 下面我们通过两个例题来说明对象的实例化过程. 例1:   编译并运行该程序会有以下输 ...