位置选择器：

一、.: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. Druid-代码段-1-1

    所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应主流程1,具体用来获取一个连接: lic DruidPooledConnection getConnection(long ma ...

  2. Druid-代码段-5-1

    所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应主流程5,连接的回收: //DruidPooledConnection类的close方法 @Override public vo ...

  3. JavaScript-----6.流程控制：分支

    1.流程控制 就是来控制代码按照何种顺序来执行,流程控制有三种结构:顺序结构.分支结构.循环结构 2.顺序流程控制 程序按照代码先后顺序依次执行 3.分支流程控制 JS中提供两种分支结构语句:if语句 ...

  4. Day4- Python基础4 深浅拷贝、三目运算、列表生成式，迭代器&生成器、装饰器

    本节内容: 1.深浅拷贝 2.三目运算 3.迭代器和生成器 4.装饰器 1.深浅拷贝 拷贝意味着对数据重新复制一份,深浅拷贝的含义就是:对于修改复制的数据是否会影响到源数据,拷贝操作对于基本数据结构需 ...

  5. AcWing 32. 调整数组顺序使奇数位于偶数前面

    习题地址 https://www.acwing.com/solution/acwing/content/2921/ 输入一个整数数组,实现一个函数来调整该数组中数字的顺序. 使得所有的奇数位于数组的前 ...

  6. <Matrix> 311 378

    311. Sparse Matrix Multiplication 稀疏矩阵的计算.稀疏矩阵的特点是有大量的0,如果采用暴力算法则比然会有很多无意义的计算. C[ i ][ j ] += A[ i ] ...

  7. golang数据结构之选择排序

    //SelectSort 选择排序 func SelectSort(arr *[]int) { ; i < len(arr); i++ { tmp := arr[i] index := i ; ...

  8. python接口自动化10-excel设计模式实战

    前言 一.简介 1.环境准备:python+requests+excel+unittest+ddt,主要安装以下环境,其它一般都有了,没有自行安装: pip install xlrd pip inst ...

  9. 利用Python进行数据分析-Pandas(第一部分)

    利用Python进行数据分析-Pandas: 在Pandas库中最重要的两个数据类型,分别是Series和DataFrame.如下的内容主要围绕这两个方面展开叙述! 在进行数据分析时,我们知道有两个基 ...

  10. javaAPI操作Hbase

    package chapter04; import org.apache.commons.lang.StringUtils; import org.apache.hadoop.conf.Configu ...