你的位置:首页 > 软件开发 > 网页设计 > CSS Pseudo

CSS Pseudo

发布时间:2016-07-23 19:00:21
先来一条金科玉律:伪类的效果可以通过添加一个实际的类来达到;伪元素的效果可以通过添加一个实际的元素来达到。 第一部分,Pseudo-classes,伪类 一、链接系(这个应该是最熟悉的啦。)a:link——未访问的链接a:visit ...

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 }

原标题:CSS Pseudo

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。