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. Debian, Ubuntu linux安装openjdk

    sudo apt-get install openjdk-8-jre 这只是单单安装了jre而已,不要安装这个 安装下面这个就行了 sudo apt-get install openjdk-8-jdk ...

  2. 在微信小程序中使用LeanCloud（一）

    之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数 ...

  3. 【底层原理】深入理解Cache （上）

    存储器是分层次的,离CPU越近的存储器,速度越快,每字节的成本越高,同时容量也因此越小.寄存器速度最快,离CPU最近,成本最高,所以个数容量有限,其次是高速缓存(缓存也是分级,有L1,L2等缓存),再 ...

  4. celery 定时任务

    用celery定时任务,定时删除文件夹 tasks.py from celery import Celery import os import shutil app = Celery('demo') ...

  5. ASP.NET -- WebForm -- 页面生命周期事件

    ASP.NET -- WebForm --  页面生命周期事件在页生命周期的每个阶段中,页将引发可运行您自己的代码进行处理的事件. 1. PreInit: 使用该事件来执行下列操作: 检查 IsPos ...

  6. MySQL知识总结（一）安装与配置（Linux CentOS）

    1 安装 环境 CentOS yum install -y mysql-server mysql mysql-deve service启动 1.1 启动 service mysqld start 1. ...

  7. 【Teradata】日期类型转换

    1.字符串与日期间转换 date '2007-05-10' cast( (curent_timestamp() (format )) //结果为20180615164201 2.毫秒转换为时间戳 / ...

  8. 如何用Ant Design Pro框架做项目省力

    1.熟悉React所有语法,以及redux.redux-saga.dva.一类的库的能力 2.灵活运用该框架提供的基础UI组件,想方设法利用现有的UI组件进行组合,尽可能减少工作量

  9. Spring Boot 菜鸟教程 application.properties 常用配置

    SPRING CONFIG (ConfigFileApplicationListener) spring.config.name 配置文件名称,默认为application spring.config ...

  10. 在Intellij IDEA下通过Hibernate逆向生成实体类

    前言:在IDEA中,通过相关插件,可以利用Hibernate逆向生成数据表对应的实体类.具体操作及注意事项见本篇随笔. 1.创建一个基于maven的hibernate工程.并在工程中添夹hiberna ...