位置选择器：

一、.: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. HTML5中像网页中保存cookie的实现

    if(window.plus)//判断当前的设备是手机 window.localStorage.setItem("key","value");//设置值 win ...

  2. Memcached 基本语法 记录

    set 命令:命令将value数值存储在指定的key中: set key flags exptime bytes [noreply] value key:键值 key-value 结构中的 key,用 ...

  3. 在 VS 中查看所有线程

    查看当前所有线程 在程序中打断点,然后启动调试(注意:线程窗口需要启动调试才可以看得到)点击 Debug > Windows > Threads 线程窗口如下:

  4. The Three Rules/Laws of TDD

    You are not allowed to write any production code unless it is to make a failing unit test pass. 除非为了 ...

  5. 关于powermock报错org.powermock.reflect.exceptions.FieldNotFoundException: Field 'fTestClass' was not found in class org.junit.internal.runners.MethodValidator.问题解决

    事件背景 使用PowerMock模拟一个局部变量,添加@RunWith(PowerMockRunner.class).@PrepareForTest(StudentService.class)注解成功 ...

  6. 拎壶学python3-----（1）输出与字符转换

    一.输入自己的名字打印 二.数字和字符串是不能相加的如下 怎么解决上边的问题呢? 如果是相加我们要把字符串转成数字类型如下 如果不想让他相加可以写成这样如下: ok,关于转换就先讲到这里

  7. vue记事2

    1.vue2父子组件双向数据传递 https://segmentfault.com/a/1190000011783590 2.vue父组件通过props向子组件传递方法的方式 https://segm ...

  8. ansible命令参数介绍

    -m:要执行的模块,默认为command -a:模块的参数 -u:ssh连接的用户名,默认用root,ansible.cfg中可以配置 -k:提示输入ssh登录密码.当使用密码验证的时候用 -s:su ...

  9. 定位表和索引使用的Page

    数据存储的基本单元是Page,每个Page是8KB,数据文件(mdf和ndf)占用的硬盘空间,逻辑上按照PageNumber进行划分,也就是说,可以把数据文件看作是PageNumber 从0到n的连续 ...

  10. WPF属性绑定实现双向变化

    WPF依赖项属性可以实现属性的绑定,成功绑定之后只要修改后台绑定的属性,即可UI同步自动更新绑定的值,无需手动刷新界面:同样,前台的值变化后,通过获取绑定的属性值也可获取UI变化后的值,实现双向变化的 ...