先来一条金科玉律：

伪类的效果可以通过添加一个实际的类来达到；伪元素的效果可以通过添加一个实际的元素来达到。

第一部分，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>&nbsp;</p>，中间有一个&nbsp; ， 在页面上会显示一个空白行。

（额。但是不知道这个区别有什么用。。。）

五、其它

:root——选择文档的根元素；在html文档中，总是<html>元素。

:not()——否定选择器，比如 :not(p)，选择所有非<p>元素。

:target——语言匮乏，暂且不表；一个很神奇的伪类。

CSS Pseudo-classes的更多相关文章

  1. CSS pseudo classes All In One

    CSS pseudo classes All In One CSS 伪类 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes ...

  2. 【CSS】Intermediate2:Pseudo Classes

    1.specify a state or relation to the selector selector:pseudo_class { property: value; } 2.Link 3.Dy ...

  3. [TypeStyle] Style CSS pseudo elements with TypeStyle

    Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special ...

  4. CSS pseudo element All In One

    CSS pseudo element All In One CSS 伪元素 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elemen ...

  5. [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 ...

  6. [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 ...

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

  8. [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 : ...

  9. CSS 笔记五（Combinators/Pseudo-classes/Pseudo-elements）

    CSS Combinators Four different combinators in CSS3 descendant selector (space) child selector (>) ...

  10. CSS隐藏元素的几种方法

    使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...

随机推荐

  1. PAT甲题题解-1037. Magic Coupon (25)-贪心，水

    题目说了那么多,就是给你两个序列,分别选取元素进行一对一相乘,求得到的最大乘积. 将两个序列的正和负数分开,排个序,然后分别将正1和正2前面的相乘,负1和负2前面的相乘,累加和即可. #include ...

  2. Beta阶段冲刺-5

    一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 4. 工作中遇到的困难 杨晨露:现在我过的某种意义上挺滋润的,没啥事了都.......咳,困难就是前端每天都在想砸电脑,我要怎么阻止 ...

  3. 动态规划刷题集python代码

    1 爬楼梯(Fibonacci) #有一楼梯共M级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法? def fun(m): c = [0]*m c[0] = 1 c[1] = 2 for i ...

  4. node之body-parser的使用

    bodyparser 用来解析post的请求取代了 原生的 req.on 的方式 但是只能取到ajax 和表单的数据 ,取不到上传的文件类型. let express = require('expre ...

  5. Windows 下 Docker 的简单学习使用过程之一 dockertoolbox

    1. Windows 下面运行 Docker 的两个主要工具1): Docker for Windows2): DockerToolbox区别:Docker For Windows 可以理解为是新一代 ...

  6. teamviewer & commercial-use

    teamviewer & commercial-use https://www.teamviewer.com/zhCN/pricing/commercial-use/ https://www. ...

  7. （转）DATATABLE(DATASET)与实体类之间的互转.

    转自:http://www.cnblogs.com/zzyyll2/archive/2010/07/20/1781649.html dataset和实体类 之间的转换 //dataset转实体类  代 ...

  8. BZOJ 2561 最小生成树 | 网络流 最小割

    链接 BZOJ 2561 题解 用Kruskal算法的思路来考虑,边(u, v, L)可能出现在最小生成树上,就是说对于所有边权小于L的边,u和v不能连通,即求最小割: 对于最大生成树的情况也一样.容 ...

  9. 图形化调试工具DDD

    ubuntu安装DDD: sudo apt-get install ddd If you still need to compile it for some reason you should be ...

  10. C#生成和识别二维码

    用到外部一个DLL文件(ThoughtWorks.QRCode.dll),看效果 生成截图 识别截图 生成二维码后右键菜单可以保存二维码图片,然后可以到识别模式下进行识别,当然生成后可以用手机扫描识别 ...