快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

和记娱乐手机app下载:详细讲解CSS特殊选择符伪类的应用技巧



伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大年夜的用场便是可以对链接在不合状态下定义不合的样式效果。

1. 语法

伪类的语法是在原有的语法里加上一个伪类(和记娱乐手机app下载pseudo-class):

selector:pseudo-class {property: value}

(选择符:伪类 {属性: 值})

伪类和类不合,是CSS已经定义好的,不能象类选择符一样随意用其余名字,根据上面的语法可以解释为工具(选择符)在某个特殊状态下(伪类)的样式。

类选择符及其他选择符也同样可以和伪类混用:

selector.class:pseudo-class {property: value}

(选择符.类:伪类 {属性: 值})

2. 锚的伪类

我们最常用的是4种a(锚)元素的伪类,它表示动态链接在4种不合的状态:link、visited、active、hover(未造访的链接、已造访的链接、激活链接和鼠标停顿在链接上)。我们把它们分手定义不合的效果:

a:link {color: #FF0000; text-decoration: none} /* 未造访的链接 */

a:visited {color: #00FF00; text-decoration: none} /* 已造访的链接 */

a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */

a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

(上面这个例子中,这个链接未造访时的颜色是血色并无下划线,造访后是绿色并无下划线,激活链接时为蓝色并有下划线,鼠标在链接上时为紫色并有下划线)

留意:无意偶尔这个链接造访前鼠标指向链接时有效果,而链接造访后鼠标再次指向链接时却无效果了。这是由于你把a:hover放在了a:visited的前面,这样的话因为后面的优先级高,当造访链接后就轻忽了a:hover的效果。以是根据叠层和记娱乐手机app下载顺序,我们在定义这些链接样式时,必然要按照a:link, a:visited, a:hover, a:actived的顺序书写。

3. 伪类和类选择符

将伪类和记娱乐手机app下载和类组合起来用,就可以在同一个页面中做几组不合的链接效果了,例如,我们定义一组链接为血色,造访后为蓝色;另一组为绿色,造访后为黄色:

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

现在利用在不合的链接上:

这是第一组链接

这是第二组链接

4. 其他伪类

此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不合的样式。

下面看这个例子,我们在段落标记里定义文本首字尺寸为默认大年夜小的3倍:

……

这是和记娱乐手机app下载一个段落,这个段落的首字被放大年夜了。

我们再定义一个首行样式的例子:

……

这是段落的第一行

这是段落的和记娱乐手机app下载第二行

这是段落的第三行

(上例中段落的第一行径血色,第二、三行径默认颜色)

留意:首字和首行的伪类必要IE5.5以上的版本支持。

您可能还会对下面的文章感兴趣: