伪类选择器
:nth-child(n)选择器
用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的
起始值始终是1,而不是0!表达式的值为0或小于0的时候,不选择任何匹配的元素。
:nth-last-child(n)选择器
和“:nth-child(n)”选择器非常相似,只是从某父元素的最后一个子元素开始计算来选择特定的元素。
:first-of-type选择器
类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个
父元素下的
某个类型的第一个子元素。
:last-of-type选择器
和“:first-of-type”选择器功能一样,不同的是选择
父元素下的
某个类型的最后一个子元素。
nth-of-type(n)选择器
只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。
“n”参数可以是具体的
整数,也可以是
表达式,还可以是
关键词。
:nth-last-of-type(n)选择器
和“:nth-of-type(n)”选择器一样,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始。
:only-child选择器
匹配元素的父元素中
有且只有唯一的一个子元素。
:only-of-type选择器
用来选择一个元素是它的父元素的唯一一个相同类型的子元素。
【实例1:】将容器“div.wrapper”中偶数段落和奇数Div背景设置为橙色,将第一个div背景设置为绿色,最后一个p背景设置为蓝色。
.wrapper > div:nth-of-type(2n+1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div:nth-of-type(2n-1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div:nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
.wrapper > div:first-of-type{
background: green;
}
.wrapper > p:last-of-type{
background: blue;
}
【实例2:】将仅有一个P元素类型的背景修改为橙色,有且只有一个元素背景改为蓝色
.wrapper {
border: 1px solid #ccc;
padding: 5px;
width: 150px;
}
.wrapper p:only-of-type{
background: orange;
}
.wrapper p:only-child{
background: blue;
}
- 大小: 124.1 KB
- 大小: 95.8 KB
分享到:
相关推荐
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
HTML5新增了Css选择器、伪类,本文整理了一些,并给出简单的使用介绍,喜欢html5的朋友可以参考下,希望对大家有所帮助
结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论...
H5C3新增的常用标签 音频 视频标签 新增的表单类型 新增的选择器 属性选择器 伪类选择器 微元素选择器
6.5 CSS 3新增的伪类选择器 176 6.6 在脚本中修改显示样式 195 6.7 本章小结 197 第7章 字体与文本相关属性 198 7.1 字体相关属性 199 7.2 CSS 3支持的颜色表示方法 205 7.3 文本相关属性 206 7.4 CSS 3新增...
本文中用到的是CSS3新增的:not()伪类选择符,可以匹配不含有选择符的元素。假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线 实例代码如下: 复制代码代码如下:<!DOCTYPE><html><head...
36.CSS3新增的属性选择器22:17 37.结构性伪类选择器上28:52 38.结构性伪类选择器下21:00 39.使用选择器在页面中插入内容34:26 40.文字阴影与自动换行20:24 41.服务器端字体和@font-face属性21:50 42.盒布局上18:03 ...
:is 是一个用于匹配任意元素的伪类,使用方法很简单,只需要将选择器列表传入即可,也就是说, :is() 的结果也就是传入的选择器列表中选中的元素。 那么这个选择器有什么用呢?举个例子:我需要对不同层级下的 h1 ...
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本...:target 是 CSS3 新增的一个伪类,可用于选取当前活动的目标元素
如果是不需要兼容 IE8- ,那么使用 CSS3 新增的选择器无疑是一种好方法。 // 使用伪类选择器,选择第 3n 个元素去掉边框 li:nth-child(3n){ border-right:none; } 当然,如果个数确定也不多,给需要去掉右边框...
学习选择器的使用,如元素选择器、类选择器、ID选择器等,以及组合选择器、伪类选择器。 学习布局技术,包括但不限于浮动布局、定位布局以及现代布局方法如Flexbox和Grid布局。 JavaScript 学习JavaScript基本语法...
8.CSS3新增伪类有哪些并简要描述?9.谈谈你理解的优雅降级和渐进增强?10.style标签写在body前和body后的区别是什么?11.什么是FOUC?你是如何避免FOUC的?12.用css创建一个三角形,并简述原理?13.谈一下清除浮动的...
1.[新增]后台引导页加入非IE浏览器提示,后台部分功能在非IE浏览器下可能没法使用 2.[修复]【紧急】纠正后台设皮肤目录存在入侵挂马BUG 3.[修复]纠正服务器时间跟保存到数据库里格式不同造成登录有时出现时间不匹配...
10、后台新增广告可选择广告尺寸规格,提高广告维护效率; 11、后台新增频道设置功能,可一键启动/屏蔽各频道; 12、后台新增即将到期企业,列出30天内到期的企业,方便提醒企业续费; 13、系统采用Fckeditor...