1.
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:active 向被激活的元素添加样式(被点击)
立即学习“前端免费学习笔记（深入）”；
以上四种伪类应用于超链接时，a:hover必须在a:link和a:visited之后，a:active必须在a:hover之后，a:link和a:visited两者的顺序没有规定
1.1 超链接:
<style> a:link{ color:red; } a:visited{ color:green; } a:hover{ color:blue; } a:active{ color:yellow; } style> <a href="#">pmx-cnblogsa>
1.2 div
<style> div{ width:100px; height:100px; background-color:red; border:3px solid blue; overflow:hidden; transition:width 1s,height 2s,background-color 1s,line-height 2s,font-size 2s; line-height:100px; text-align:center; } div:hover{ background-color:green; width:300px; height:300px; line-height:300px; font-size:2em } div:active{ color:yellow; } style> <div>This is divdiv>
正常状态:
鼠标移到div上时的样子:
鼠标左键按下后得样子:
2. :first-child
p:first-child选择作为某个元素的第一个子元素的p元素，而不是选择p元素的第一个子元素
<style> #myDiv > p:first-child{ background-color:#3C6; } style> <body> <p>p8p> <div id='myDiv' style='width:300px;height:300px;overflow:auto'> <p>p1p> <p>p2p> <p>p3p> <div> <p>p4p> <p>p5p> div> div> <p>p6p> <p>p7p> body>
P1作为myDiv的第一个子元素被选中
3. :focus
向获得焦点的元素添加特殊样式，比如按钮被点击后，文本框输入文本
<style> input:focus{ background-color:yellow; } style> <input type='text' value=""/>
4. :lang
向带有指定lang属性的元素添加样式
<style> :lang(zh){ color:red; } style> <p lang="zh">p7p>
5. :target
:target伪类和超链接有关，当我们希望打开页面或者单击按钮定位到页面中某个元素时，常常是这样的
<a href="#jump>jump#jump"
>This is paragraphp>
:target就是捕获点击超链接后，定位到的元素，在:target里面的CSS代码都是控制这个捕获到的元素的。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
:target{
background-color:red;
}
style>
head>
<body>
<a href="#jump1">jump To 1a>
<a href="#jump2">jump To 2a>
<p id="jump1">This is paragraph1p>
<p id="jump2">This is paragraph2p>
body>
html>
点击jump to 1时，paragraph1变红。
点击jump to 2时，paragraph2变红
:target表示所有被定位到的元素，背景色改变。如果我们想让paragraph1单独变红，可以这样:
<style> #jump1:target{ background-color:red; } style>
案例:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.tab_list{
position: relative;
margin:50px;
min-height: 200px;
}
.tab_content{
position: absolute;
width:600px;
height:170px;
padding:15px;
border:1px solid #91a7b4;
border-radius:3px;
box-shadow:0 2px 3px rgba(0,0,0,0.1);
font-size:1.2em;
line-height:1.5em;
color:#666;
background-color: #fff;
overflow: hidden;
}
.tab_menu{
position: absolute;
top:100%;
list-style-type: none;
margin:0;
padding:0;
}
.tab_menu li{
display:inline-block;
}
.tab_menu a{
text-decoration: none;
display:block;
padding:5px;
font-size:12px;
font-family:"楷体";
color:#333;
border:1px solid #91a7b4;
border-radius: 0 0 5px 5px;
background-color:#e3f1f8;
margin-right:10px;
}
:target{
z-index:10;
}
style>
head>
<body>
<div class="tab_list">
<ul class="tab_menu">
<li><a href="#tab1">标签一a>li>
<li><a href="#tab2">标签二a>li>
<li><a href="#tab3">标签三a>li>
ul>
<div id="tab1" class="tab_content">欢迎加设计达人Q群：50063010<br/>
设计达人以原创和分享一些高质量的设计文章为主，希望喜欢！
div>
<div id="tab2" class="tab_content">
<p>本Tab切换效果纯CSS3制作，无任何JavaScriptp>
最新Q群：50063010<br/>
爱设计，爱分享——设计达人（<a href="http://www.shejidaren.com">http://www.shejidaren.coma>）
div>
<div id="tab3" class="tab_content">
<p>高质量设计文章分享平台p>
<p>欢迎加设计达人Q群：50063010<br /><a href="http://www.shejidaren.com/">设计达人a>以原创和分享一些高质量的设计文章为主，希望喜欢p>
div>
div>
body>
html>
