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. [20180808]exists and not exists.txt

    [20180808]exists and not exists.txt --//生产系统遇到的一个性能问题,通过例子来说明: 1.环境:SCOTT@test01p> @ ver1 PORT_ST ...

  2. C#面向对象 类的封装

    class student { public int _code; public int Code//属性 { //获取值 get { ; } //设置值 set { _code = value + ...

  3. SQL Script

    查某字段是否有汉字 SELECT*FROM TB WHERE COL LIKEN'%[吖-咗]%'

  4. Timeout occurred while waiting for latch: class 'ACCESS_METHODS_DATASET_PARENT'

    前些天某个SQL Server数据库的错误日志爆出如下错误: Timeout occurred while waiting for latch: class 'ACCESS_METHODS_DATAS ...

  5. c/c++ allocator 使用

    allocator 使用 作用:只开辟空间,不调用构造函数 操作一览表 allocator<T> a 定义一个名为a的allocator对象,它可以为类型为T的对象分配内存 a.alloc ...

  6. 聚类——GAKFCM

    聚类——GAKFCM 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 参考文献:黄白梅. 基于GA优化的核模糊C均值聚类算法的研究[D]. 武汉科技大学 ...

  7. （转）Spring Boot 2 (十)：Spring Boot 中的响应式编程和 WebFlux 入门

    http://www.ityouknow.com/springboot/2019/02/12/spring-boot-webflux.html Spring 5.0 中发布了重量级组件 Webflux ...

  8. MySQL大小写敏感的解决方案

    前言:对于MySQL的大小写敏感的影响,笔者在一个小项目中深刻的体会到:当想要查询一条数据时,总是出来两条或多条,后来发现是大小写敏感造成的原因,本文就该问题提出解决方案. 1.MySQL大小写敏感的 ...

  9. Mysql 关键字的优先级 分组 多表联查

    查看模式 select @@global.sql_mode; 关键字的优先级 from 来自 where 条件 group by 分组 having 筛选 select 查询 distinct 去重 ...

  10. 只有 assignment、call、increment、decrement 和 new 对象表达式可用作语句

    错误信息:只有 assignment.call.increment.decrement 和 new 对象表达式可用作语句: 分析:发生这种情况一般是在赋值时把“=”写成了“==”,例如:textBox ...