你的位置:首页 > 网页设计

[网页设计]CSS Pseudo


先来一条金科玉律:

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

 

第一部分,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如下:

1 p:nth-child(3) {2   color:orange;3 }

页面效果:

第一幅图:

                       

第二幅图:

 

 

一切尽在不言中。。。

 

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代码:

1 h1:nth-of-type(2) {2   color:blue;3 }4 5 p:nth-of-type(3) {6   color:orange;7 }

下面上图:

 

记住两步,先找元素类型,再找第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; , 在页面上会显示一个空白行。

(额。但是不知道这个区别有什么用。。。)