先来一条金科玉律:伪类的效果可以通过添加一个实际的类来达到;伪元素的效果可以通过添加一个实际的元素来达到。 第一部分,Pseudo-classes,伪类 一、链接系(这个应该是最熟悉的啦。)a:link——未访问的链接a:visit ...
先来一条金科玉律:
伪类的效果可以通过添加一个实际的类来达到;伪元素的效果可以通过添加一个实际的元素来达到。
第一部分,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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。