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编写气体安全管理系统29-跨平台

    一.前言 Qt的跨平台特性是非常厉害的,本来作为C++来说,跨平台的特性比JAVA还要好,只不过学习难度更大,所以大家更理解的跨平台是JAVA,Qt的跨平台特性是我见过的所有开发环境和语言中最厉害的, ...

  2. matlab学习笔记10_6 字符串与数值间的转换以及进制之间的转换

    一起来学matlab-matlab学习笔记10 10_6 字符串与数值间的转换以及进制之间的转换 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合 ...

  3. [LeetCode] 195. Tenth Line 第十行

    Given a text file file.txt, print just the 10th line of the file. Example: Assume that file.txt has ...

  4. golang 基于channel封装资源池（可用于封装redis、mq连接池）

    package pool import ( "errors" "io" "sync" "time" ) var ( Er ...

  5. win7/win10 设置始终以管理员身份运行cmd窗口

    在桌面上找到cmd快捷方式图标,右键"属性" 4.选择"快捷方式",点击“高级” 5.勾选用管理员身份运行,点击"确定" 6.点击" ...

  6. python基础教程（2）

    Python 基础教程 Python 是一种解释型.面向对象.动态数据类型的高级程序设计语言. 执行Python程序 对于大多数程序语言,第一个入门编程代码便是 "Hello World!& ...

  7. PHP计算两个坐标之间的距离

    <?php /** * 计算两点之间的距离 * @param $lng1 经度1 * @param $lat1 纬度1 * @param $lng2 经度2 * @param $lat2 纬度2 ...

  8. 12 Cookie、Session和JSP基础

    1.会话技术 (1)会话概念:一次会话中包含多次请求和响应.一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 (2)会话功能:在一次会话的范围内的多次请求间,共享数据 (3)会 ...

  9. Spring MVC 问题归纳

    记录一些在Spring MVC配置中出现的问题 一.配置tomcat包没有加载 错误: idea调试web项目时出现:java.lang.ClassNotFoundException:org.spri ...

  10. 第一二章、C++简介和基本语法

    C++简介 C++包含了三种编程模式,分别是面向过程.面向对象和泛型编程. 程序执行过程 C++编程格式 C++每个程序都会有main()函数作为入口,基本编程包括预处理/头文件.函数.输入输出语句等 ...