CSS 伪类


目录

    显示目录


什么是伪类?

伪类用于定义特殊状态 一个元素的。

例如,它可用于:

  • 当用户将鼠标悬停在元素上时设置元素的样式

  • 访问过的链接和未访问过的链接的样式不同

  • 当元素获得焦点时设置其样式

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 类

伪类可以与 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> 上

在 <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>



CSS - :first-child 伪类

:first-child 伪类匹配作为另一个元素的第一个子元素的指定元素。

匹配第一个 <p> 元素

在以下示例中,选择器匹配作为任何元素的第一个子元素的任何 <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> 元素:

例子

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> 元素中的所有 <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>



CSS - :lang 伪类

: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>




所有 CSS 伪类

:active

例子:

a:active	

示例描述:

选择活动链接

:checked

例子:

input:checked	

示例描述:

选择每个选中的 <input> 元素

:disabled

例子:

input:disabled

示例描述:

选择每个禁用的 <input> 元素

:empty

例子:

p:empty

示例描述:

选择没有子元素的每个 <p> 元素

:enabled

例子:

input:enabled

示例描述:

选择每个启用的 <input> 元素

:first-child

例子:

p:first-child

示例描述:

选择作为其父级的第一个子级的每个 <p> 元素

:first-of-type

例子:

p:first-of-type

示例描述:

选择作为其父元素的第一个 <p> 元素的每个 <p> 元素

:focus

例子:

input:focus

示例描述:

选择具有焦点的 <input> 元素

:hover

例子:

a:hover

示例描述:

鼠标悬停时选择链接

:in-range

例子:

input:in-range

示例描述:

选择值在指定范围内的 <input> 元素

:invalid

例子:

input:invalid

示例描述:

选择所有具有无效值的 <input> 元素

:lang(language)

例子:

p:lang(it)

示例描述:

选择每个 lang 属性值以“it”开头的 <p> 元素

:last-child

例子:

p:last-child

示例描述:

选择作为其父级的最后一个子级的每个 <p> 元素

:last-of-type

例子:

p:last-of-type

示例描述:

选择作为其父元素的最后一个 <p> 元素的每个 <p> 元素

:link

例子:

a:link

示例描述:

选择所有未访问的链接

:not(selector)

例子:

:not(p)

示例描述:

选择不是 <p> 元素的每个元素

:nth-child(n)

例子:

p:nth-child(2)

示例描述:

选择作为其父元素的第二个子元素的每个 <p> 元素

:nth-last-child(n)

例子:

p:nth-last-child(2)

示例描述:

选择作为其父级的第二个子级的每个 <p> 元素,从最后一个子级开始计数

:nth-last-of-type(n)

例子:

p:nth-last-of-type(2)

示例描述:

选择作为其父元素的第二个 <p> 元素的每个 <p> 元素(从最后一个子元素开始计数)

:nth-of-type(n)

例子:

p:nth-of-type(2)

示例描述:

选择作为其父元素的第二个 <p> 元素的每个 <p> 元素

:only-of-type

例子:

p:only-of-type

示例描述:

选择作为其父元素的唯一 <p> 元素的每个 <p> 元素

:only-child

例子:

p:only-child

示例描述:

选择作为其父级的唯一子级的每个 <p> 元素

:optional

例子:

input:optional

示例描述:

选择没有“required”属性的 <input> 元素

:out-of-range

例子:

input:out-of-range

示例描述:

选择值超出指定范围的 <input> 元素

:read-only

例子:

input:read-only

示例描述:

选择指定了“readonly”属性的 <input> 元素

:read-write

例子:

input:read-write

示例描述:

选择没有“readonly”属性的 <input> 元素

:required

例子:

input:required

示例描述:

选择指定了“required”属性的 <input> 元素

:root

例子:

root

示例描述:

选择文档的根元素

:target

例子:

#news:target	

示例描述:

选择当前活动的 #news 元素(单击包含该锚点名称的 URL)

:valid

例子:

input:valid

示例描述:

选择所有具有有效值的 <input> 元素

:visited

例子:

a:visited

示例描述:

选择所有访问过的链接

所有 CSS 伪元素

::after

例子:

p::after

示例描述:

在每个 <p> 元素后插入内容

::before

例子:

p::before	

示例描述:

在每个 <p> 元素之前插入内容

::first-letter

例子:

p::first-letter	

示例描述:

选择每个 <p> 元素的第一个字母

::first-line

例子:

p::first-line	

示例描述:

选择每个 <p> 元素的第一行

::marker

例子:

::marker

示例描述:

选择列表项的标记

::selection

例子:

p::selection

示例描述:

选择用户选择的元素部分