美文网首页
伪类选择器

伪类选择器

作者: 闻金听凤 | 来源:发表于2018-03-24 11:34 被阅读0次

    伪类选择器

    伪类选择器,就是基于元素当前所处的抓奶来选取元素,由于状态通常是动态变化的,当元素处于一个特定状态时,他可能得到一个伪类的样式;当状态改变是,他又会失去这个样式。由此可知,它是基于文档之外的抽象,所以称作伪类。

    伪类选择器是css中已经定义好的选择器,不能有用户随便起名,只能按css规定的标准格式进行使用。其语法为:
    选择器:伪类名{属性:值;}

    选择器 功能描述 版本
    E:link 选择未被访问过的链接 1
    E:visited 选择已被访问过的链接 1
    E:active 选择被激活(即鼠标已经按下还未释放)的E元素 1
    E:hover 选择鼠标悬停其上的E元素 1
    E:focus 选择获得焦点的E元素 1

    在HTML中,超链接是指所有带有href属性的a元素。可以使用链接伪类来区分未访问的链接和已访问的链接:
    a:link { color : blue;}
    a:visited { color : purpel;}
    当然,对于链接伪类,不仅可以应用颜色,还可以应用更多样式。如。对于已访问的链接,除了紫色外,还可以有一条删除线。
    尽管:link:visted 非常有用,但他们是静态的,第一是现实之后,他们不会再改变元素的样式。并且他们只用于锚元素,因此被称作链接伪类或锚伪类。
    :hover、:focus、:active则不同,他们可以根据用户行为动态改变文档的外观,故被称为动态味蕾,或用户行为伪类。
    最初,动态伪类总是用来设置超链接的样式,不过现在他们可以应用到任何元素。如在表格上使用:hover伪类,表单的文本输入框是使用:focus伪类,表单的提交按钮上使用:active伪类等。如:
    tr:hover {
    background:#cld5eb;
    }
    input:focus {
    outline: 1px solid #cld5eb;
    }
    另外,还可以把链接伪类结合在一起使用,来创造更丰富的样式。如,定义已被访问链接的悬停效果:
    a: visited : hover {
    color: #8888;
    哪种书写顺序并不重要,a:visited:hovera:hover:visited将会得到相同的效果。但是不要把互斥的类结合在一起,如,一个链接不能同时是未访问和已访问状态,因此a:link:visited没有任何意义。

    相关文章

      网友评论

          本文标题:伪类选择器

          本文链接:https://www.haomeiwen.com/subject/cqkqcftx.html