我是标题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>18-序选择器</title>

    <style>

        /*

        p:first-child{

            color: red;

        }

        */

        /*

        p:first-of-type{

            color: blue;

        }

        */

        /*

        p:last-child{

            color: red;

        }

        */

        /*

        p:last-of-type{

            color: blue;

        }

        */

        /*

        p:nth-child(3){

            color: red;

        }

        */

        /*

        p:nth-of-type(3){

            color: blue;

        }

        */

        /*

        p:nth-last-child(2){

            color: red;

        }

        */

        /*

        p:nth-last-of-type(2){

            color: red;

        }

        */

        /*

        p:only-child{

            color: purple;

        }

        */

        /*

        p:only-of-type {

            color: red;

        }

        */

        .para:only-of-type {

            color: red;

        }

    </style>

</head>

<body>

<!--

CSS3中新增的选择器最具代表性的就是序选择器

1.同级别的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

注意点: 不区分类型

2.同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type  选中同级别中同类型的最后一个标签

:nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n)  选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签

-->

<!--

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<div>

    <p>我是段落5</p>

    <p>我是段落6</p>

    <p>我是段落7</p>

    <p>我是段落8</p>

</div>

-->

<p class="para">我是段落1</p>

<div>

    <p class="para">我是段落2</p>

    <p class="para">我是段落2</p>

    <h1>我是标题</h1>

</div>

</body>

</html>

H5 18-序选择器的更多相关文章

(18)0907_CSS选择器详解
选择器的优先级(决定那个样式生效): important: > 内联样式 > id选择器> 类和伪类 > 元素选择器 > 通配选择器> 继承样式无优先级最大 ...
H5 68-伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
H5 21-属性选择器下
21-属性选择器下 --> <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
H5 20-属性选择器上
20-属性选择器上 --> 我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 <!DOCTYPE html> <html lang="en"> ...
H5 17-兄弟选择器
17-兄弟选择器我是标题我是超链接我是段落我是段落我是段落我是标题我是段落我是段落我是段落 --> 我是标题我是超链接我是段落我是段落我是超链接我是段落我是标题我 ...
H5 16-并集选择器
16-并集选择器我是标题我是段落我是段落我是段落 <!DOCTYPE html> <html lang="en"> <head> < ...
H5 15-交集选择器
15-交集选择器我是段落我是段落我是段落我是段落我是段落 <!DOCTYPE html> <html lang="en"> <head> ...
H5 14-后代选择器和子元素选择器
14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
H5 13-子元素选择器
13-子元素选择器 p{ color: red; } */ /* #identity>p{ color: blue; } */ div>ul>li>p{ color: purp ...
jq序选择器
1.库和框架库:小而精直接操作DOM css() jquerry封装js的那些操作: 事件,属性, ajax(交互的技术),DOM,选择器框架:大而全事件,DOM,属性操作,ajax,&qu ...

随机推荐

java抓取网页或者文件的邮箱号码
抓文件的 package reg; import java.io.BufferedReader; import java.io.FileNotFoundException; import java.i ...
mssql sqlserver 批量删除所有存储过程的方法分享
转自:http://www.maomao365.com/?p=6864 摘要: 下文讲述采用sql脚本批量删除所有存储过程的方法,如下所示: 实验环境:sqlserver 2008 R2 平常使用sq ...
第10章嵌入式Linux 的调试技术
10.1 打印内核调试信息:printk printk位函数运行在内核空间, printf函数运行在用户空间.也就是说,像Linux 驱动这样的Linux内核程序只能使用printk函数输出调试信息 ...
Java JDK与JRE
JDK与JRE JDK(Java Development Kit):Java开发工具包.包含JRE中的所有内容,以及用于开发小应用程序和应用程序的编译器和调试器等工具. JRE(Java Runtim ...
《Java大学教程》—第8章通过继承扩展类
8.2 继承(inheritance):继承是指在类之间共享属性和方法.继承关系是一种层次关系.在继承关系中位于顶部的类称为超类(或基类),位于下面的类称为子类(或派生类).类型转换(type ...
【C编程基础】C编译链接命令gccc
1.gcc安装 rpm -qa|grep gcc ==>检查gcc是否安装 gcc -v ==>检查gcc版本 yum -y install gcc ==>安装gcc 2.基本语法 ...
dp Surf
题目:https://vj.69fa.cn/1fc993e7e0e1e6fa7ce4640b8d46ef8d?v=1552762626 这个题目和尼克的任务这个题目很像,这个题目因为同一时刻具有选择性 ...
Redis 的安装使用通知事件
Redis 的安装使用介绍: redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string.list.set.zset(sorted ...
在 Linux 中自动配置 IPv6 地址
在 Linux 中自动配置 IPv6 地址在本文中,我们将学习如何为 ULA 自动配置 IP 地址. 何时使用唯一本地地址唯一本地地址unique local addresses(ULA)使用 f ...
如何在C#Asp.Net MVC使用Redis缓存
为什么要在Asp.Net MVC项目中使用Redis缓存呢?系统是按照高负载高并发来设计的,这就涉及服务器集群带来的问题,Session存储验证码或登录信息,在系统登录的时候,可能展示登录界面和存储验 ...

H5 18-序选择器

我是标题

H5 18-序选择器的更多相关文章

随机推荐

热门专题