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

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.html的源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>子元素的伪类选择器</title>

        <style>

            /**

             *

             *    子元素的伪类装饰器:

             *         :first-child

             *             可以选中第一个子元素

             *         :last-child

             *             可以选中最后一个子元素

             *         :nth-child(num)

             *             可以选中任意位置的子元素;

             *             如果不写num的值则默认为1，效果和":first-child"伪类相同了;

             *             如果num的值为"even"，则表示偶数位置子元素

             *             如果num的值为"odd",则表示奇数位置子元素

             *

             *     可选择类型:

             *         :first-of-type

             *         :last-of-type

             *         :nth-of-type

             *         以上元素和":first-child",":last-child",":nth-child(num)"这些非常类似;

             *         只不过first-child",":last-child",":nth-child(num)"是在所有的子元素中排列。

             *         而":first-of-type",":last-of-type",":nth-of-type"是在当前类型的子元素中排列

             *

             */

            /**

             *     案例一:

             *         为第一个p标签(该标签必须是第一个标签)设置一个背景颜色为黄色

             */

            p:first-child{

                background-color: yellow;

            }

            /**

             *     案例二:

             *         为最后一个p标签(该标签必须是最后一个标签)设置背景颜色为棕色

             */

            p:last-child{

                background-color: brown;

            }

            /**

             *     案例三:

             *         选择第三个位置的子元素将其背景设置为洋红色

             */

            p:nth-child(3){

                background-color: magenta;

            }

            /**

             *     案例四:

             *         选择所有子元素的第一个p标签并将其背景颜色设置为红色

             */

            p:first-of-type{

                background-color: red;

            }

            /**

             * 案例五:

             *         选择所有子元素的最后一个p标签并将其背景颜色设置为蓝色

             */

            p:last-of-type{

                background-color: blue;

            }

        </style>

    </head>

    <body>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <div>

            <p>我是第一个div的一个p标签</p>

            <p>我是第一个div的一个p标签</p>

            <p>我是第一个div的一个p标签</p>

            <p>我是第一个div的一个p标签</p>

            <span>我是第一个div的span标签</span>

        </div>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <div>

            <span>我是第二个div的span标签</span>

            <p>我是第二个div的一个p标签</p>

            <p>我是第二个div的一个p标签</p>

            <p>我是第二个div的一个p标签</p>

            <p>我是第二个div的一个p标签</p>

            <p>我是第二个div的一个p标签</p>

        </div>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <span>我是body的span标签</span>

    </body>

</html>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-子元素的伪类选择器的更多相关文章

  1. HTML&CSS基础-子元素和后代元素选择器

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

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

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

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

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

  4. Css详解之（伪类选择器）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS中before、after伪类选择器的巧用

    大家好,今天给大家带来使用css中 before . after 实现两个效果,话不多说,我们先来看看, before 和 after 它们的作用是什么 选择器 作用 before 向选定的元素前插入 ...

  6. CSS3伪元素、伪类选择器

    伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...

  7. 前端学习 --Css -- 子元素的伪类

    :first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...

  8. 演示-JQuery中伪元素和伪类选择器

    HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  9. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

随机推荐

  1. rqalpha学习-2

    conf = default_config()deep_update(user_config(), conf)deep_update(project_config(), conf)   三种不同级别的 ...

  2. python：校验邮箱格式

    # coding:utf-8 import re def validateEmail(email): if re.match("^.+\\@(\\[?)[a-zA-Z0-9\\-\\.]+\ ...

  3. docker笔记1--了解docker

    1 docker是什么 (1)背景 docker是基于go语言实现的开源容器项目.目标是实现"build ship and run any app,anywhere",通过对应用的 ...

  4. （转）JVM原理讲解和调优

    背景:jvm实际调优在面试时候经常被问到,所以有必要认真总结一番. 转自:JVM原理讲解和调优 四.JVM内存调优 首先需要注意的是在对JVM内存调优的时候不能只看操作系统级别Java进程所占用的内存 ...

  5. jqGrid设置单选

    beforeSelectRow: function() { $(this).jqGrid('resetSelection'); return true; }

  6. 11 Sping框架--AOP的相关概念及其应用

    1.AOP的概念 AOP(Aspect Oriented Programming 面向切面编程),通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一 ...

  7. vue总结的知识点

    1.Vue生命周期钩子,都是干嘛用的? Vue实例从创建到销毁的过程,就是生命周期.Vue的生命周期包括:开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程.在Vue的整个 ...

  8. XGBoost 重要参数(调参使用)

    XGBoost 重要参数(调参使用) 数据比赛Kaggle,天池中最常见的就是XGBoost和LightGBM. 模型是在数据比赛中尤为重要的,但是实际上,在比赛的过程中,大部分朋友在模型上花的时间却 ...

  9. PHP CLI中，三个系统常量：STDIN、STDOUT、STDERR

    PHP CLI中,有三个系统常量,分别是STDIN.STDOUT.STDERR,代表文件句柄. /** *@ 标准输入 *@ php://stdin & STDIN *@ STDIN是一个文件 ...

  10. SAS学习笔记57 template的管理

    template查询 首先点击SAS Windows左上方查询框,输入“odst”或者“odstemplates”,如下所示: 然后点击enter键,进入查询的template文件夹,如下所示: 这里 ...