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. 解析xml报文，xml与map互转

    这段时间写了一个关于xml报文的工具类,做一下具体的讲解: xml文本 <NTMMessage version="1.03"> <NTMHeader> &l ...

  2. ofo容器pass架构分享

    一.我们先要了解一下,为什么企业需要一个paas平台?或者可以说paas到底能做什么? 1.1 我们先来了解一下paas到底是什么? PaaS是Platform-as-a-Service的缩写,意思是 ...

  3. 第七章 用户输入和while循环

    7.1函数input()的工作原理 函数默认输入为字符串string,如果需使用数字,需用int进行类型转换 7.2 while循环 while是根据条件的真假判断是否进入执行 使用标志: 使用bre ...

  4. Bootstrap学习--栅格系统

    响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...

  5. sar命令详解

    基础命令学习目录首页 原文链接:http://lovesoo.org/linux-sar-command-detailed.html sar(System Activity Reporter系统活动情 ...

  6. markdown语法示例

    现在是我在学习Markdown时做的笔记.学完这些Markdown的基本使用已经不成问题. 1. 标题设置(让字体变大,和word的标题意思一样)在Markdown当中设置标题,有两种方式:第一种:通 ...

  7. 个人作业-Week 1

    1)快速看完整部教材,列出你仍然不懂的5到10个问题,发布在你的个人博客上. Q1:"Scrum Master不是一个官,而是一个没有行政权力的沟通者,就像微软的PM那样.他/她同时还要在团 ...

  8. c#学习路线及目录导航

    一 很久前的想法 转眼间,2018年已经过了四分之一,从我进入学校选择计算机专业到现在工作,已经过去了4年之久了.这一路走来经历了很多的曲折,对软件开发这个职业有了许多新的认识,我主要是从事NET领域 ...

  9. Leetcode题库——34.在排序数组中国查找元素的第一个和最后一个位置

    @author: ZZQ @software: PyCharm @file: searchRange.py @time: 2018/11/12 19:19 要求:给定一个按照升序排列的整数数组 num ...

  10. 团队作业2 <嗨，你的快递！>需求分析与原型设计

    哦,不,是你的快速(*_*) 第一部分 需求分析 1.1 用户调研 1.1.1调研对象:由于我们的系统是校园快递代取业务,面向的是大学生活,所以本次调研范围都是在校大学生(除了师大学生,也包括了外校的 ...