CSS 伪类
2019-02-12 19:29 更新
我们可以使用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选择器 :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>
上面的代码呈现如下：
以上内容是否对您有帮助：
更多建议：