位置选择器：

一、.: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. netperf 网络测试工具

    软件介绍: netperf是惠普公司开源的一款针对网络性能的测试工具,主要基于TCP或UDP的传输.根据应用的不同,可以进行批量数据传输(bulk data transfer)模式和请求/应答(req ...

  2. July 20th, 2019. Week 29th, Saturday

    If we just open the door a crack, the light comes pouring in. 只要把门开个小口,光就会倾泻而入. Don't be so disheart ...

  3. 如何使用postman判断返回结果是否正确

    针对一个接口,我们在知道参数以及参数对应的结果时,可以通过postman进行判断,验证返回数据是否与预期数据相等.这样可以使我们的接口测试更加的方便简洁. 1.准备数据. postman可以接受的文件 ...

  4. spring mvc 源码简要分析

    关于web项目,运用比较多的是过滤器和拦截器 过滤器基于责任链设计模式 创建过滤器链 / Create the filter chain for this requestApplicationFilt ...

  5. cf rock is push 【dp】

    附上学习的博客:https://blog.csdn.net/u013534123/article/details/102762673 大致题意:一个迷宫,里面有很多箱子,你可以向右或者向下走.当你遇到 ...

  6. 【Oracle】SQL的各种连接join

    SQL JOIN 子句用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段. 最常见的 JOIN 类型: INNER JOIN(简单的 JOIN).LEFT JOIN.RIGHT JOIN.F ...

  7. LG1131 「ZJOI2007」时态同步 树形DP

    问题描述 LG1131 题解 正难则反,把从一个点出发到叶子结点看做从叶子结点走到那个点. DP方程很显然. \(\mathrm{Code}\) #include<bits/stdc++.h&g ...

  8. Regex quick reference

    近段时间,接触正则较多,常规法则如下,网摘内容,方便查阅.

  9. Mac OSX vim配色方案选择

    首先查看系统自带的vim配色种类: ls /usr/share/vim/vim73/colors 大致输出如下: README.txt default.vim elflord.vim morning. ...

  10. JMeter 使用 http长连接 |史上最全

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 疯狂创客圈(笔者尼恩创建的高并发研习社群)Springcloud 高并发系列文章,将为大家介绍三个版本的 高并发秒杀: ...