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. UE4的内存模型

    转自:https://blog.csdn.net/noahzuo/article/details/73565259 UObject和FUObjectItem UE4运行的基本单位是UObjet,然而U ...

  2. TCP/IP学习笔记16--TCP--特点，数据重发，连接管理，段

    TCP充分实现了数据传输时各种控制功能,可以进行丢包时的重发控制,还可以对次序乱掉的包进行顺序控制,这些在UDP中都是没有的.UDP是一种没有复杂控制,提供面向无连接通信服务的一种协议.TCP是面向有 ...

  3. [转帖]Linux教程(8)-Linux中的进程和日志㐇、

    Linux教程(8)-Linux中的进程和日志 2018-08-20 23:42:23 钱婷婷 阅读数 3554更多 分类专栏: Linux教程与操作 Linux教程与使用   版权声明:本文为博主原 ...

  4. Java开发笔记（一百三十一）Swing的列表框

    前面介绍了选择框的用法,当时为了方便用户勾勾点点,无论是复选框还是单选按钮,统统把所有选项都摆在界面上.倘若只有两三个选项还好办,要是选项数量变多比如超过五个,这么多的选择框一齐在界面罗列,不光程序员 ...

  5. 通过names.index()方法找到第2个eva值 ，并将其改成EVA

    names= ['alex','rain','peiqi','eva','mac','jack','eva','kangkang','jain']first_index=names.index('ev ...

  6. python标准库之glob介绍

    python标准库之glob介绍 glob 文件名模式匹配,不用遍历整个目录判断每个文件是不是符合. 1.通配符 星号(*)匹配零个或多个字符 import glob for name in glob ...

  7. array_merge_recursive 的使用

    作用:递归合并数组 场景:在平时开发中,我们可能遇到获取的数据是多个维度的数据,而我们只需要其中的一个. 代码如下: $project_id = 'project_id'; $arr1 = [ 'pr ...

  8. Harbor仓库配置https访问

    注:高版本(14以上)docker执行login命令,默认使用https,且harbor必须使用域名,只是用ip访问是不行的. 假设使用的网址是:www.harbor.mobi,本机ip是192.16 ...

  9. windows10 iis浏览wcf报404.3错误

    报错:HTTP错误404.3-Not Found 由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加MIME映射. 解决步骤如下: 控制面板->打开 ...

  10. SpringCloud整合过程中jar依赖踩坑经验

    今天在搭建SpringCloud Eureka过程中,一直在报pom依赖错误,排查问题总结如下经验. 1.SpringBoot整合SpringCloud两者版本是有严格约束的,详细见SpringBoo ...