H5 18-序选择器
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-序选择器的更多相关文章
- (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----java集合框架图
- [20190312]关于增量检查点的疑问(补充).txt
[20190312]关于增量检查点的疑问(补充).txt --//有人问我以前写一个帖子的问题,关于增量检查点的问题,链接如下:http://blog.itpub.net/267265/viewspa ...
- django静态模版使用
第一步:在app目录下建立static文件夹,将CSS文件.js文件放到static文件夹下 第二步:TEMPLATES = [ { 'BACKEND': 'django.template.backe ...
- ArcGIS Server服务器监控
最近项目上需要对服务器与ArcGISServer服务进行监控,做了一个初步的原型,实现了以下功能. 一.服务器监控 注册服务器 服务器运行状态监控 在线状态 CPU.内存.存储配置监控,由于现在很多采 ...
- NodeJS二进制包安装和快捷键配置(适用于U盘版安装配置)
首先下载NodeJS二进制安装包:https://nodejs.org/dist/v10.15.3/node-v10.15.3-win-x64.zip 在D盘新建NodeJS文件夹,解压node-v1 ...
- Java监控类库Metrics
Gauge含义:瞬时值值类型:不限 Counter:作用:可以insr, decr 的计数器值类型:数字 Histogram:含义:maximum, mean, etc., it also measu ...
- GitHub-分支管理03-多人合作【重点】
参考博文:廖雪峰Git教程 1. 多人协作 当你从远程仓库克隆时,实际上Git自动把本地的master分支和远程的master分支对应起来了,并且,远程仓库的默认名称是origin. 要查看远程库的信 ...
- kafka_2.11-2.0.0_介绍
1. JMS是什么 1.1. JMS的基础 JMS是什么:JMS是Java提供的一套技术规范 JMS干什么用:用来异构系统 集成通信,缓解系统瓶颈,提高系统的伸缩性增强系统用户体验,使得系统模块化和组 ...
- 《Java大学教程》—第19章 改进用户界面
用户与程序交互的媒介称为用户界面(user interface)或人机界面(human-computer interface). 19.2 Border接口8个实现Border接口的标准边框类: ...
- 《Java大学教程》—第15章 异常
自测题:1. 什么是异常?P357异常是在程序生命周期内出现的事件,它会导致程序行为不可靠. 2. 已检查异常和未检查异常的区别是什么?P359在编译器允许程序被编译通过前,要求程序员必须编写代 ...