18-序选择器


我是标题

我是段落1

我是段落2

我是段落3

我是段落4

我是段落5

我是段落6

我是段落7

我是段落8

-->

我是段落1

我是段落2

我是段落2

我是标题

<!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-序选择器的更多相关文章

  1. (18)0907_CSS选择器详解

    选择器的优先级(决定那个样式生效): important: > 内联样式 > id选择器> 类和伪类 > 元素选择器 > 通配选择器> 继承样式无优先级 最大    ...

  2. H5 68-伪元素选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. H5 21-属性选择器下

    21-属性选择器下 --> <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. H5 20-属性选择器上

    20-属性选择器上 --> 我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 <!DOCTYPE html> <html lang="en"> ...

  5. H5 17-兄弟选择器

    17-兄弟选择器 我是标题 我是超链接 我是段落 我是段落 我是段落 我是标题 我是段落 我是段落 我是段落 --> 我是标题 我是超链接 我是段落 我是段落 我是超链接 我是段落 我是标题 我 ...

  6. H5 16-并集选择器

    16-并集选择器 我是标题 我是段落 我是段落 我是段落 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. H5 15-交集选择器

    15-交集选择器 我是段落 我是段落 我是段落 我是段落 我是段落 <!DOCTYPE html> <html lang="en"> <head> ...

  8. H5 14-后代选择器和子元素选择器

    14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. H5 13-子元素选择器

    13-子元素选择器 p{ color: red; } */ /* #identity>p{ color: blue; } */ div>ul>li>p{ color: purp ...

  10. jq序 选择器

    1.库和框架 库:小而精 直接操作DOM css() jquerry封装js的那些操作: 事件,属性, ajax(交互的技术),DOM,选择器 框架:大而全  事件,DOM,属性操作,ajax,&qu ...

随机推荐

  1. 洗礼灵魂，修炼python（64）--爬虫篇—re模块/正则表达式（2）

    前面学习了元家军以及其他的字符匹配方法,那得会用啊对吧?本篇博文就简单的解析怎么运用 正则表达式使用 前面说了正则表达式的知识点,本篇博文就是针对常用的正则表达式进行举例解析.相信你知道要用正则表达式 ...

  2. NoSQL与MongoDB介绍

    写在前面 本文是由一次演讲整理出来的,文中大部分资料来源于网络,感谢Wikipedia,Google和MongoDB官网.文中使用的MongoDB版本为1.2.4. What is NoSQL NoS ...

  3. mysql 中的内置函数

    一.字符串函数 select concat(name,"age is",age) from users;  insert(str,x,y,insert)//将字符串x位置开始y个位 ...

  4. spring cloud 实践坑点记录

    用spring cloud 微服务框架有一段时间了有一些坑点在这里给大家记录一下希望大家用得着 1.当我们使用聚合性能监控的时候,我们采用 rabbitmq作为消息中间件来收集性能信息最后在使用Tur ...

  5. git使用命令行拉取远程代码仓库中的分支至本地

    1.本地创建文件夹用于存放拉取的代码 2.执行git init初始化文件夹 3.与远程代码仓库建立连接 git remote add origin git@github.com.wuylin/noth ...

  6. 《Java大学教程》—第23章 Java网络编程

    本章主要关注的是Java的几个应用网络编程的场景,对于网络编程没有太多深入介绍,而Java本来也没有多少针对网络编程的特性.虽然Java有个Applet的概念,但是真用这个的开发的场景其实不多. 23 ...

  7. ServletContextListener的作用

    ServletContextListener是对ServeltContext的一个监听.servelt容器启动,serveltContextListener就会调用contextInitialized ...

  8. centos7下kubernetes（6。运行应用）

    Deployment 从一个例子开始 kubectl run nginx-deployment --image=nginx:1.7.9 --replicas=2 kubectl get deploym ...

  9. ubuntu18.04 递归批量删除op_test_xml/ 目录下 .pyc后缀的文件

    find op_test_xml/ -type f -name "*.pyc" -exec rm -f {} \;

  10. P1705 爱与愁过火（背包）

    本来是个搜索题,但是自觉的成了背包! 多重用正序,01用逆序. 抽象出来一下,一个物体的体积为ai, 每次装入背包需要bi(在题目中为菜数量)分钟(这个题目只是bi为 1 而已)问在r分钟内,装比n大 ...