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. Qt编写图片及视频TCP/UDP网络传输

    一.前言 很多年前就做过类似的项目,无非就是将本地的图片上传到服务器,就这么简单,其实用http的post上传比较简单容易,无需自定义协议,直接设置好二进制数据即可,而采用TCP或者UDP通信的话,必 ...

  2. [LeetCode] 206. Reverse Linked List 反向链表

    Reverse a singly linked list. Hint: A linked list can be reversed either iteratively or recursively. ...

  3. [LeetCode] 387. First Unique Character in a String 字符串的第一个唯一字符

    Given a string, find the first non-repeating character in it and return it's index. If it doesn't ex ...

  4. node版本切换工具n的使用介绍

    全局安装 npm install -g n mac的安装目录/usr/local/n/versions/node/13.2.0 因此首先在/usr/local/创建目录n,修改权限为普通访问权限,这样 ...

  5. k8s pv,pvc无法删除问题

    一般删除步骤为:先删pod再删pvc最后删pv 但是遇到pv始终处于“Terminating”状态,而且delete不掉.如下图: 解决方法: 直接删除k8s中的记录: 1 kubectl patch ...

  6. vs2019 中文离线安装包下载

    1. 通过在https://visualstudio.microsoft.com/zh-hans/downloads/ 下载VS2019, 之后会下载vs_enterprise__78682482.1 ...

  7. VS2019/VS2017设置默认管理员权限启动

    找到vs安装目录下的:C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Common7\IDE\devenv.exe 右键- ...

  8. Altera PLL Locked 失锁的原因

    Altera PLL 有时可能会出现失锁的情况,查找了官网资料,有总结到有几个情况下会出现失锁. 官网中的网页如下,是英文的: https://www.altera.com.cn/support/su ...

  9. Appium UiWatchers 监听解决各种非期待弹窗，弹层，弹弹弹等问题

    app自动化时,各种不期待的弹层弹窗,升级广告等时有飞出,由于弹窗具有不定时,不定页面等很多不确定性.有的弹窗很不友好,不×掉,很难进行下一步操作,造成 测试用例失败.而判断是否有弹窗,弹层很麻烦.研 ...

  10. LeetCode 78. 子集(Subsets) 34

    78. 子集 78. Subsets 题目描述 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明: 解集不能包含重复的子集. 每日一算法2019/6/6Day 34L ...