CSS Pseudo-classes
先来一条金科玉律:
伪类的效果可以通过添加一个实际的类来达到;伪元素的效果可以通过添加一个实际的元素来达到。
第一部分,Pseudo-classes,伪类
一、链接系
(这个应该是最熟悉的啦。)
a:link——未访问的链接
a:visited——已访问的链接
a:hover——鼠标悬浮在链接上时的样式
a:active——鼠标点击链接时的样式
上述4种伪类在同时应用到<a>元素时,考虑到样式的层叠关系,需要按照LoVeHA的顺序,否则容易出问题。
二、表单系
input:focus——指定焦点元素的样式;简单来说,就是鼠标光标闪动的那个地方,常用于表单的输入框。
input:disabled——指定带有disabled属性的<input>元素的样式
input:enabled——指定带有enabled属性的<input>元素的样式
input:checked——指定带有checked属性的<input>元素的样式
input:required——指定带有required属性的<input>元素的样式
input:optional——指定不带有required属性的<input>元素的样式
input:valid——指定带有有效值的<input>元素的样式
input:invalid——指定带有无效值的<input>元素的样式
input:read-only——指定带有readonly属性的<input>元素的样式
input:read-write——指定不带有readonly属性的<input>元素的样式
input:in-range——假如一个输入框中指定了最小值和最大值(type="number"/type="range"),当输入的值在指定的范围内时,就会应用这个样式
input:out-of-range——xxxxxx,当输入的值超出了指定的范围,就会应用这个样式。
三、交互系
:hover——理论上能用于所有元素,比如#header:hover,其意思是指,当用户鼠标悬浮在id值为header的元素上时,应用指定的样式。
:active——理论上能用于所有元素,比如#header:active,其意思是指,当用户鼠标点击id值为header的元素时,应用指定的样式。
:focus——理论上能用于所有能够被焦点化的元素,多用于表单元素,比如<input>、<textarea>等。
焦点化,通俗地理解,鼠标点一下,会出现光标(一闪一闪的)。
四、数字系
前方高能,备好纸笔。。。
:first-child
比如 p:first-child,第一步,在任何一个元素中,找到第一个子元素;第二步,这个子元素是不是p元素;如果是,就选它(如果不是,就跳过),然后寻找下一个。
:last-child
寻找最后一个子元素,步骤同上。
:nth-child()
这个伪类可以(必须)指定参数,以p:nth-child()举例,有以下几种方式。
提示:参数表达式中n都是从0开始算的。
1. 当参数为一个具体的数字,比如3,p:nth-child(3);第一步,在任何一个元素中,找到它的第3个子元素;第二步,这个子元素是不是p元素。
当参数为1的时候,即 :nth-child(1),等同于 :first-child。
有图才有真相:
CSS如下:
p:nth-child(3) {
color:orange;
}
页面效果:
第一幅图:
第二幅图:
一切尽在不言中。。。
2. 当参数为2n,那就选择所有的偶数子元素,等同于even;当参数为2n+1或2n-1,那就选择所有的奇数子元素,等同于odd;这个在做斑马线表格的时候经常用。
3. 当参数为n的倍数,比如3n,这个好理解。
4. 当参数为n+具体数字,比如n+3,表示从第3个子元素往后找;因为n从0开始,那么这个表达式的值就是从3开始,3、4、5。。。这样子。
5. 当参数为-n+具体数字,比如-n+3,表示从第3个子元素往前找;因为n从0开始,那么这个表达式的值就是从3开始,然后2、1。。。这样子。
6. 当参数为具体数字*n+1,比如3n+1,表示从1开始,隔3选一。
实践中可以根据需要自创表达式,自行发挥吧。
记住两步,第n个找到了之后,还要看元素类型对不对。
:nth-last-child
接受的参数与 :nth-child()一致,只不过这个要倒过来数。
:nth-of-type()
接受参数,参数类型同上。
比如 p:nth-of-type(3),先找到所有的p元素,然后找第3个p元素,给它应用样式。
有图有真相,请看下面:
CSS代码:
h1:nth-of-type(2) {
color:blue;
} p:nth-of-type(3) {
color:orange;
}
下面上图:
记住两步,先找元素类型,再找第n个。
:first-of-type——略
:last-of-type——略
:only-child
比如 p:only-child,它表示,父元素中只有唯一一个子元素,而且这个子元素还必须是p元素。
:only-of-type
比如 p:only-of-type,它表示,父元素中有几个子元素都没关系,但是p元素只能有一个。
:empty
比如 p:empty,它表示,如果有一个完全空的(连空格都没有的)p元素,就选它。
两步,先找完全空的元素,再看是不是p元素。
小发现:
如果html是这样子的,<p> </p>,中间有空格,在页面上是没有这个p元素的位置的;
如果html是这样的,<p> </p>,中间有一个 , 在页面上会显示一个空白行。
(额。但是不知道这个区别有什么用。。。)
五、其它
:root——选择文档的根元素;在html文档中,总是<html>元素。
:not()——否定选择器,比如 :not(p),选择所有非<p>元素。
:target——语言匮乏,暂且不表;一个很神奇的伪类。
CSS Pseudo-classes的更多相关文章
- CSS pseudo classes All In One
CSS pseudo classes All In One CSS 伪类 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes ...
- 【CSS】Intermediate2:Pseudo Classes
1.specify a state or relation to the selector selector:pseudo_class { property: value; } 2.Link 3.Dy ...
- [TypeStyle] Style CSS pseudo elements with TypeStyle
Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special ...
- CSS pseudo element All In One
CSS pseudo element All In One CSS 伪元素 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elemen ...
- [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)
DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hi ...
- [CSS3] Define Form Element States with CSS Form Pseudo Classes
Using just semantic CSS Pseudo-Classes you can help define important states for form elements that e ...
- [CSS3] Identify Interactive HTML Elements with CSS Link Pseudo Classes
The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what ele ...
- [CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements (Blockquotes)
Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using ::before : ...
- CSS 笔记五(Combinators/Pseudo-classes/Pseudo-elements)
CSS Combinators Four different combinators in CSS3 descendant selector (space) child selector (>) ...
- CSS隐藏元素的几种方法
使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...
随机推荐
- LINUX内核分析第三周学习总结——构造一个简单的Linux系统MenuOS
LINUX内核分析第三周学习总结——构造一个简单的Linux系统MenuOS 张忻(原创作品转载请注明出处) <Linux内核分析>MOOC课程http://mooc.study.163. ...
- Linux内核分析第二周学习笔记
linux内核分析第二周学习笔记 标签(空格分隔): 20135328陈都 陈都 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.co ...
- 第二阶段冲刺——three
个人任务: 王金萱:优化统计个人博客结果页面的显示. 司宇航:绘制logo. 季方:合并程序(优化统计个人博客界面). 马佳慧:选择功能界面的选择框排版设计. 站立会议: 任务看板和燃尽图:
- formidable模块的使用
Node.js的Formidable模块的使用 今天总结了下Node.js的Formidable模块的使用,下面做一些简要的说明. 1) 创建Formidable.IncomingForm ...
- [CB]Intel 2018架构日详解:新CPU&新GPU齐公布 牙膏时代有望明年结束
Intel 2018架构日详解:新CPU&新GPU齐公布 牙膏时代有望明年结束 北京时间12月12日晚,Intel在圣克拉拉举办了架构日活动.在五个小时的演讲中,Intel揭开了2021年CP ...
- Alpha、伪Beta 发布后,夏一鸣的个人感想与体会
伪Beta发布在4月15日拉开了帷幕,夏一鸣代表OneZero团队上台进行了Account的发布.产品发布成功,但依然存在问题和不足.以下就Alpha.伪Beta 发布谈一谈我自己(夏一鸣)的想法. ...
- java8新特性(四)_Stream详解
之前写过一篇用stream处理map的文章,但是对stream没有一个整体的认识,这次结合并发编程网和ibm中介绍stream的文章进行一个总结,我会着重写对list的处理,毕竟实际工作中大家每天进行 ...
- java学习之switch 等值判断
当匹配到相等的值时候 则进入case里面执行语句 当该语句有break时候 则退出匹配 当没有break时候 则继续往下匹配 直到遇到break才停止匹配
- oracle 查看临时表空间temp 的使用情况以及扩展表空间
SELECT D.TABLESPACE_NAME,SPACE "SUM_SPACE(M)",BLOCKS SUM_BLOCKS, USED_SPACE )/SPACE*,) &qu ...
- 【刷题】BZOJ 3252 攻略
Description 题目简述:树版[k取方格数] 众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏.今天他得到了一款新游戏<XX 半岛>,这款游戏有n个场景(s ...