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内核分析》课程第五周学习总结
姓名:何伟钦 学号:20135223 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...
- Photo Cleaner -- proposed by Wei Zhang
Need想必大家都有用手机或相机记录生活的习惯吧!在旅途中,驴友们见到美丽的风景,往往激动地咔嚓一下拍张照记录下来.完事后发现角度不太好,于是又咔嚓一下……不知不觉中一下照了好多,然而真正需要的只是那 ...
- 团队作业4——WBS练习
一.作业要求 对团队项目进行任务分解 要求所有人共同参与 队长列出需求 成员进行估计 队长领导大家达成共识 形成团队报告,发至团队博客 注意:分解的粒度最小不应超过6小时(即一个人在6小时以内能够完 ...
- linux分区命名
linux中任何内容都是文件 硬盘 文件 用户 都是文件 硬件设备文件名称 ide硬盘 /dev/hd[a-d] scsi/sata/usb硬盘 /dev/sd[a-p] 光驱 /dev/cdrom/ ...
- Linux命令（二十一） 改变文件所有权 chown 和 chgrp
目录 1.命令简介 2.常用参数介绍 3.实例 4.直达底部 命令简介 一个文件属于特定的所有者,如果更改文件的属主或属组可以使用 chown 和 chgrp 命令. chown 命令可以将文件变更为 ...
- Oracle client 使用 .net程序连接 数据库时 出现 8.1.7 的解决办法
1. GS产品 连接oracle数据库时出现错误图示 2. 其实解决这个问题的办法很简单 一般是 修改一下 Oracle的app 目录的权限 最简单的办法是增加 everyone 权限 然后重启机器即 ...
- Mybatis中jdbcType和javaType、typeHandler的对照关系
JdbcType与Oracle.MySql数据类型对应列表,及 JdbcType Oracle MySql CHAR CHAR CHAR VARCHAR VARCHAR VARCHAR LONGV ...
- Codeforces Round #485 Div. 1 vp记
A:对每种商品多源bfs一下每个点到该商品的最近距离,对每个点sort一下取前s个即可. #include<iostream> #include<cstdio> #includ ...
- 洛谷P4219 [BJOI2014]大融合（LCT）
LCT维护子树信息的思路总结与其它问题详见我的LCT总结 思路分析 动态连边,LCT题目跑不了了.然而这题又有点奇特的地方. 我们分析一下,查询操作就是要让我们求出砍断这条边后,x和y各自子树大小的乘 ...
- 【CF912E】Prime Game（meet in the middle)
[CF912E]Prime Game(meet in the middle) 题面 CF 懒得翻译了. 题解 一眼题. \(meet\ in\ the\ middle\)分别爆算所有可行的两组质数,然 ...