位置选择器：

一、.:first-child选择器

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>first-child选择器的使用</title>

        <style type="text/css">

            p:first-child{color: red;}

        </style>

    </head>

    <body>

        <p>第一篇 毕业了</p>

        <p>第二篇 关于考试</p>

        <p>第三篇 夏日飞舞</p>

        <p>第四篇 惆怅的心</p>

        <p>第五篇 畅谈美丽</p>

    </body>

</html>

结果：

二、.:last-child选择器

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>last-child选择器的使用</title>

        <style type="text/css">

            p:last-child{color: blue;}

        </style>

    </head>

    <body>

        <p>第一篇 毕业了</p>

        <p>第二篇 关于考试</p>

        <p>第三篇 夏日飞舞</p>

        <p>第四篇 惆怅的心</p>

        <p>第五篇 畅谈美丽</p>

    </body>

</html>

结果：

三、.:nth-child(n)选择器

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>nth-child(n)选择器的使用</title>

        <style type="text/css">

            p:nth-child(2){color: red;}

        </style>

    </head>

    <body>

        <h1>这是标题</h1>

        <p>第一篇 毕业了</p>

        <p>第二篇 关于考试</p>

        <p>第三篇 夏日飞舞</p>

        <p>第四篇 惆怅的心</p>

        <p>第五篇 畅谈美丽</p>

        <h1>这是标题</h1>

    </body>

</html>

结果：

四、.:nth-of-type(n)选择器

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>nth-child(n)和nth-last-child(n)选择器的使用</title>

        <style type="text/css">

        /*    p:nth-child(2){color: red;}*/

            p:nth-last-child(2){color: blue;}

        </style>

    </head>

    <body>

        <h1>这是标题</h1>

        <p>第一篇 毕业了</p>

        <p>第二篇 关于考试</p>

        <p>第三篇 夏日飞舞</p>

        <p>第四篇 惆怅的心</p>

        <p>第五篇 畅谈美丽</p>

        <h1>这是标题</h1>

    </body>

</html>

结果：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>nth-of-type(n)和nth-last-of-type(n)选择器的使用</title>

        <style type="text/css">

            h2:nth-of-type(2n+1){color: red;}

            h2:nth-of-type(2n){color:green;}

            p:nth-last-of-type(2){color: blue;}

        </style>

    </head>

    <body>

        <h2>网页设计</h2>

        <p>网页设计是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。</p>

        <h2>JAVA</h2>

        <p>Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言。</p>

        <h2>iOS</h2>

        <p>iOS是由苹果公司开发的移动操作系统。</p>

        <h2>PHP</h2>

        <p>PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。</p>

    </body>

</html>

结果：

Html学习之九（CSS选择器的使用--位置选择器）的更多相关文章

  1. 学习总结：CSS(一)定义方式、选择器、选择器权重

    一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...

  2. angular学习笔记(九)-css类和样式3

    再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <tit ...

  3. angular学习笔记(九)-css类和样式2

    在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error ...

  4. angular学习笔记(九)-css类和样式1

    本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式 从一个最基本的例子来看: <!DOCTYPE html> <html ng-app> <head> ...

  5. 前端学习笔记之CSS选择器

    阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...

  6. 【前端学习】【CSS选择器】

    CSS选择器     CSS选择器 CSS(Cascading Style Sheets)是一项出色的技术,它使得网页的结构和表现样式完全分离.利用CSS选择器能轻松地对某个元素添加样式而不改动HTM ...

  7. 【CSS学习笔记】CSS选择器

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

  8. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  9. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

随机推荐

  1. android binder 进程间通信机制5-Service注册和代理对象的获取

    ServiceManager,其实也是一个Service,不过它的Server端实现并未使用Binder库的结构实现,而是直接打开binder/dev进行通信的,不具有普遍性. 下面以MediaSer ...

  2. CodeForces - 1263E（线段树维护前缀和最值）

    题意 https://vjudge.net/problem/CodeForces-1263E 您要设计一个只有一行的打字机,这一行的长度是无限大,一开始可以认为每个字符都是空.您的打字机有一个光标只指 ...

  3. java8-06-四大函数式接口

    在使用lamdba表达式需要函数式接口的支持    java8已经提供了很多函数式接口   在java.util.function包下 

  4. WebScraper for Mac(网站数据抓取软件) 4.10.2

    WebScraper Mac版是一款Mac平台上通过使用将数据导出为JSON或CSV的简约应用程序,WebScraper Mac版可以快速提取与某个网页(包括文本内容)相关的信息.WebScraper ...

  5. os 和 sys 的模块使用方法和模块

    os  的模块  方法 os.remove()删除文件 os.rename()重命名文件 os.walk()生成目录树下的所有文件名 os.chdir()改变目录 os.mkdir/maked ...

  6. C#开发BIMFACE系列23 服务端API之获取模型数据8：获取模型链接信息

    系列目录     [已更新最新开发文章,点击查看详细] 在Revit等BIM设计工具中可以给模型的某个部位添加链接信息.即类似于在Office Word.Excel 中给一段文字添加本地文件链接或者网 ...

  7. Javascript模块化开发4——Grunt常用模块

    一.copy 用于复制文件与目录. grunt-contrib-copy 二.eslint 检测代码的合理性. grunt-eslint 常见参数: 1.quiet 是否只显示errors.默认值fa ...

  8. jemalloc内存占用问题

    最近,有部分越南的服务器内存不断上涨,怀疑是内存泄漏,因为框架提供的内存报告里,C内存和Lua占用内存都不大,和ps里看的差好多.总内存在12G左右,C和Lua的加起来约4G,两者相差了8G 经过一番 ...

  9. docker 集群管理gui

    k8s: https://www.rancher.cn/ swarm: https://github.com/dockersamples/docker-swarm-visualizer https:/ ...

  10. OpenGL入门1.7：摄像机

    每一个小步骤的源码都放在了Github 的内容为插入注释,可以先跳过 前言 我们已经知道了何为观察矩阵以及如何使用观察矩阵移动场景(我们向后移动了一点) OpenGL本身没有摄像机(Camera)的概 ...