位置选择器：

一、.: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. [Go] 在golang中使用正则表达式捕获子表达式

    正则匹配并且可以捕获到()这个里面的子表达式的值,linux的grep命令没办法捕获子表达式的值,只能获取到整条正则匹配的内容 package main import "regexp&quo ...

  2. Java使用FeignClient发送HTTP 请求

    使用FeignClient发送HTTP请求1.添加依赖<!-- spring cloud jar--><dependency> <groupId>org.sprin ...

  3. Scrum会议（十周）

    1.任务分配 2.会议内容探讨了本次取得的重大突破和后续要继续开展的工作.分析了自己在前端开发遇到的问题,以及如何优化自己的前端界面.然后分工,每人都去优化一部分界面,比如段祥负责个人中心的优化,程吉 ...

  4. tarjan图论算法

    tarjan图论算法 标签: tarjan 图论 模板 洛谷P3387 [模板]缩点 算法:Tarjan有向图强连通分量+缩点+DAGdp 代码: #include <cstdio> #i ...

  5. C语言中，关于排序的问题（输入n个数，输出最大的那个）

    int n,max=0,t; scanf("%d",&n); int a[n],i,k;  //这个a[n]必须要在输入n的值之后才能定义,不然定义不成. for(i=1; ...

  6. AJAX 实现form表单提交

    1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...

  7. HTML连载42-清空默认边距、文字行高

    一.            webstorm取色技巧:webstorm内置了颜色取色器,我们对某种颜色未知的时候,可以利用下图中的取色器,进行颜色识别. 二.系统会默认给body添加外边距,因此我们对 ...

  8. 大话设计模式Python实现-命令模式

    命令模式(Command Pattern):将请求封装成对象,从而使可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤消的操作. 下面是一个命令模式的demo: #!/usr/bi ...

  9. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

  10. module.exports与exports，export与export default的区别

    首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念. CommonJS模块规范 Node应用由模块组成,采用CommonJS模块规范. 根据这个规范,每个文件就是一个 ...