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. CentOS7.4安装ipython

    摘自:https://www.jianshu.com/p/aa93a0341c82 使用pip3安装ipython及其依赖包:pip3 install ipython在 .bashrc文件中添加环境变 ...

  2. idea tomcat部署项目路径

    在idea中配置的tomcat,在运行时idea不会把项目放到该路径下,而是复制一份足够的配置文件,到 ${user.home}/.IntelliJIdea/system/tomcat 目录下: C: ...

  3. [图片问答]LODOP打印的行间距字间距

    LODOP可以打印纯文本,也可以是超文本,关于哪些打印项是纯文本,哪些打印项是超文本,之前有博文相关介绍:LODOP中的纯文本和超文本打印项. 之前的关于纯文本的行间距字间距介绍:Lodop设置文本项 ...

  4. [LeetCode] 656. Coin Path 硬币路径

    Given an array A (index starts at 1) consisting of N integers: A1, A2, ..., AN and an integer B. The ...

  5. springcloud 连接docker中运行的RabbitMQ消息中间件。

    参考:https://blog.51cto.com/zero01/2173288 主要是记录几个坑: 第一个坑:开始订单服务中配置文件是: #配置rabbitmq 2019.5.17 added by ...

  6. Oracle current redo.log出现坏块后的不完全恢复案例一则

    1异常出现      8月30日下午2时左右,接同事电话,说数据库异常宕机了,现在启动不了. 2初步分析 我让现场把alert.log发过来,先看看是什么问题.   关于ORA-00353和ORA-0 ...

  7. dubbo源码分析01：SPI机制

    一.什么是SPI SPI全称为Service Provider Interface,是一种服务发现机制,其本质是将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件.这样可以在运行时,动态为 ...

  8. appium通过index查找目标控件

    2.1 通过判断控件属性获取控件 控件的所有属性都可以用作判断,比如它的text,index,resource-id是否clickable等,例如: 2.1.1 通过文本查找目标控件 1 2 el = ...

  9. 【转帖】vim/sed/awk/grep等文件批处理总结

    vim/sed/awk/grep等文件批处理总结 https://www.cnblogs.com/cangqiongbingchen/p/9760544.html Vim相关操作 1.基础 * 和 # ...

  10. 10 IO流（七）——copy方法封装、关闭流方法封装的两种方式以及try...with...resource

    前言 本文将上一节做的代码,对copy方法与关闭流方法进行封装,并使用try...with...resource关闭流. copy方法封装 我们将copy方法封装,使得只需传入两个流,就能将输入流的源 ...