伪类用于定义特殊状态 一个元素的。
例如,它可用于:
当用户将鼠标悬停在元素上时设置元素的样式
访问过的链接和未访问过的链接的样式不同
当元素获得焦点时设置其样式
Mouse Over Me
伪类的语法:
selector:pseudo-class {
property: value;
}
链接可以以不同的方式显示:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
注意: a:hover
必须位于 a:link
之后并且 CSS定义中的a:visited
才能有效! a:active
必须位于之后 a:hover
在CSS中定义才能生效! 伪类名称不区分大小写。
伪类可以与 HTML 类组合:
当您将鼠标悬停在示例中的链接上时,它会改变颜色:
a.highlight:hover {
color: #ff0000;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
font-size: 22px;
}
</style>
</head>
<body>
<h2>Pseudo-classes and HTML Classes</h2>
<p>When you hover over the first link below, it will change color and font size:</p>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
<p><a href="default.asp">CSS Tutorial</a></p>
</body>
</html>
在 <div> 元素上使用 :hover
伪类的示例:
div:hover {
background-color: blue;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Mouse over the div element below to change its background color:</p>
<div>Mouse Over Me</div>
</body>
</html>
将鼠标悬停在 <div> 元素上可显示 <p> 元素(如工具提示):
田田!我在这里!
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>Hover over this div element to show the p element
<p>Tada! Here I am!</p>
</div>
</body>
</html>
:first-child
伪类匹配作为另一个元素的第一个子元素的指定元素。
在以下示例中,选择器匹配作为任何元素的第一个子元素的任何 <p> 元素:
p:first-child
{
color: blue;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<div>
<p>This is some text.</p>
<p>This is some text.</p>
</div>
</body>
</html>
在以下示例中,选择器匹配所有 <p> 元素中的第一个 <i> 元素:
p i:first-child
{
color: blue;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</body>
</html>
在以下示例中,选择器匹配作为另一个元素的第一个子元素的 <p> 元素中的所有 <i> 元素:
p:first-child i
{
color: blue;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<div>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>
</body>
</html>
:lang
伪类允许您为不同语言定义特殊规则。
在下面的示例中, :lang
使用 lang="no" 定义 元素的引号:
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>
</body>
</html>
为超链接添加不同的样式
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<h2>Styling Links</h2>
<p>Mouse over the links and watch them change layout:</p>
<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>
使用:焦点
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br><br>
Last name: <input type="text" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
例子:
a:active
示例描述:
选择活动链接
例子:
input:checked
示例描述:
选择每个选中的 <input> 元素
例子:
input:disabled
示例描述:
选择每个禁用的 <input> 元素
例子:
p:empty
示例描述:
选择没有子元素的每个 <p> 元素
例子:
input:enabled
示例描述:
选择每个启用的 <input> 元素
例子:
p:first-child
示例描述:
选择作为其父级的第一个子级的每个 <p> 元素
例子:
p:first-of-type
示例描述:
选择作为其父元素的第一个 <p> 元素的每个 <p> 元素
例子:
input:focus
示例描述:
选择具有焦点的 <input> 元素
例子:
a:hover
示例描述:
鼠标悬停时选择链接
例子:
input:in-range
示例描述:
选择值在指定范围内的 <input> 元素
例子:
input:invalid
示例描述:
选择所有具有无效值的 <input> 元素
例子:
p:lang(it)
示例描述:
选择每个 lang 属性值以“it”开头的 <p> 元素
例子:
p:last-child
示例描述:
选择作为其父级的最后一个子级的每个 <p> 元素
例子:
p:last-of-type
示例描述:
选择作为其父元素的最后一个 <p> 元素的每个 <p> 元素
例子:
a:link
示例描述:
选择所有未访问的链接
例子:
:not(p)
示例描述:
选择不是 <p> 元素的每个元素
例子:
p:nth-child(2)
示例描述:
选择作为其父元素的第二个子元素的每个 <p> 元素
例子:
p:nth-last-child(2)
示例描述:
选择作为其父级的第二个子级的每个 <p> 元素,从最后一个子级开始计数
例子:
p:nth-last-of-type(2)
示例描述:
选择作为其父元素的第二个 <p> 元素的每个 <p> 元素(从最后一个子元素开始计数)
例子:
p:nth-of-type(2)
示例描述:
选择作为其父元素的第二个 <p> 元素的每个 <p> 元素
例子:
p:only-of-type
示例描述:
选择作为其父元素的唯一 <p> 元素的每个 <p> 元素
例子:
p:only-child
示例描述:
选择作为其父级的唯一子级的每个 <p> 元素
例子:
input:optional
示例描述:
选择没有“required”属性的 <input> 元素
例子:
input:out-of-range
示例描述:
选择值超出指定范围的 <input> 元素
例子:
input:read-only
示例描述:
选择指定了“readonly”属性的 <input> 元素
例子:
input:read-write
示例描述:
选择没有“readonly”属性的 <input> 元素
例子:
input:required
示例描述:
选择指定了“required”属性的 <input> 元素
例子:
root
示例描述:
选择文档的根元素
例子:
#news:target
示例描述:
选择当前活动的 #news 元素(单击包含该锚点名称的 URL)
例子:
input:valid
示例描述:
选择所有具有有效值的 <input> 元素
例子:
a:visited
示例描述:
选择所有访问过的链接
例子:
p::after
示例描述:
在每个 <p> 元素后插入内容
例子:
p::before
示例描述:
在每个 <p> 元素之前插入内容
例子:
p::first-letter
示例描述:
选择每个 <p> 元素的第一个字母
例子:
p::first-line
示例描述:
选择每个 <p> 元素的第一行
例子:
::marker
示例描述:
选择列表项的标记
例子:
p::selection
示例描述:
选择用户选择的元素部分