当先锋百科网

首页 1 2 3 4 5 6 7

CSS 伪类 - 编程基础教程

我们可以使用CSS伪类结合选择器来基于状态对元素进行样式化。

例如:hover将应用一个样式当用户将鼠标悬停在选择器指定的元素上时。

语法

下面的代码显示了使用CSS伪类的基本语法。我们将CSS伪类添加到选择器，并通过：分隔。

selector:pseudo-class { 
   property: value; 
}

例子

以下代码显示如何使用CSS伪类为各种状态的锚定样式。

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {color: blue;
}

/* visited link */
a:visited {color: yellow;
}

/* mouse over link */
a:hover {color: black;
}

/* selected link */
a:active {color: red;
}
</style>
</head>
<body>

<p><a href="#">This is a link</a></p>

</body>
</html>

上面的代码呈现如下：


a:hover必须来自a:link和a:visited在CSS定义中访问才能有效。

a:active必须来自a:hover在CSS定义中才能有效。


伪类和CSS类

我们可以结合具有CSS类的伪类用于样式元素。

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {color: #ff0000;
} 
</style>
</head>
<body>

<p><a class="highlight" href="#">CSS Syntax</a></p>
<p><a href="#">CSS Tutorial</a></p>

</body>
</html>

上面的代码呈现如下：


CSS选择器 :focus

:focus选择具有焦点的元素。

显示如何使用的示例：focus CSS selector。

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        :focus{border: thin black solid;padding: 4px; 
        } 
        </style> 
    </head> 
    <body> 
        <form> 
            Name: <input type="text" name="name"/> 
            <p/> 
            City: <input type="text" name="city"/> 
            <p/> 
            <input type="submit"/> 
        </form> 
    </body> 
</html>

上面的代码呈现如下：

CSS选择器


CSS选择器 :first-letter

：first-letter选择器将样式添加到的第一个字母指定的选择器。

显示如何使用的示例：first-letter的CSS选择器。

<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter{font-size:200%;color:#8A2BE2;
}
</style>
</head>
<body>
    <p>w3cschool.cn</p>
    <p>www.w3cschool.cn</p>

</body>
</html>

上面的代码呈现如下：