我是标题

<!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 ...

随机推荐

You (root) are not allowed to access to (crontab) because of pam configuration
巡检发现一台Linux服务器上的作业没有如期发送邮件,登录服务器检查后发现作业并没有执行,于是检查一下crontab的设置.结果发现如下错误: [root@mylnx2 ~]# crontab -l ...
EOS之eosio.token合约的部署和发放token
eosio.token智能合约在eos目录中自带的合约中,有一个eosio.token智能合约,这个智能合约的功能是为账户发放token,token可以用来转账操作. 操作步骤在eos私有节点操作 ...
Proxysql读写分离配置
ProxySQL是Percona主推的读写分离中间件,下载地址为: https://www.percona.com/downloads/proxysql/ 一.安装 1:下载 wget https:/ ...
sql developer以字段来删除大量数据
今天碰到一个问题,就是删除数据库数据,要删除了有1000一千条左右的数据,总共数据大概有30万条左右,但是如何删除呢, 我首先想到的是找数据的共性,因为这些数据日期都是3月份的,30万条数据时间段不相 ...
HTTP与TCP的区别和联系
工作原理(转载): https://www.cnblogs.com/zimohul/p/6506406.html 相信不少初学手机联网开发的朋友都想知道Http与Socket连接究竟有什么区别,希望通 ...
Git&GitHub
Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软 ...
MATLAB简易画图2—普通直角坐标系
MATLAB简易画图2—普通直角坐标系本人的MATLAB版本为: 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 继续在“MATLAB简易画图”这篇随 ...
11.scrapy框架持久化存储
今日概要基于终端指令的持久化存储基于管道的持久化存储今日详情 1.基于终端指令的持久化存储保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的 ...
IE在开发工具启动的情况下（打开F12）时 JS才能执行
在开发一个项目时遇到一个bug:在360急速浏览器的兼容模式下并且是线上环境时js无法执行(360急速浏览器的兼容模式下测试环境就ok), 打开f12以后刷新就没问题了,查了一下网上说的IE6/7是没 ...
发现一种写法，类似callback&&callback()
与callback&&callback()异曲同工 return data && { title: `To-do (${data.length})`, componen ...

H5 18-序选择器

我是标题

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

随机推荐

热门专题