伪类通过冒号来定义，他定义了元素的状态，如点击按下、点击完成等等。我们之前都是直接操作元素的样式
现在可以为元素的状态改变样式，使元素看上去更“动态”。
伪类选择器：
1.E：link
2.E：visited
3.E：hover
4.E：active
5.E：not（）
6.E：first-child
7.E：last-child
8.E：only-child
9.E：empty
10.E：checked
11.E：nth-child（n）
1.E：link
设置超链接a在未被访问时的样式（特指a标签）
a：link{color：red；} 未访问时a的颜色，设置别的元素没有效果，它和直接给a设置颜色不同是a{color：red；}
代表了整个a元素的样式，不分访问前访问后。
2.E：visited
设置超链接a在其链接地址一杯访问过时的样式（特指a标签）
a：visited{color：yellow}
1和2的例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
a:link{color: red;}
a:visited{color: yellow;}
</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>
未点击时的颜色是红色，点击过后的颜色是黄色。
3.E：hover
设置鼠标悬停在元素上时的样式，不限于a标签，p、li标签也可以使用。通常可结合背景图的变换完成许多效果。例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
a:link{color: red;}
a:visited{color: yellow;}
a:hover{color: blue;}
</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>
悬停时颜色为蓝色。
4.E：active
设置元素在鼠标按下时的样式（不限于a标签）例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li{
display: inline-block;
list-style: none;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
font-family: "microsoft yahei";
}
ul li:hover{
background-color: #ff4400;
color: #FFFFFF;
}
ul li:active{color: yellow;}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>第一页</li>
<li>第二页</li>
<li>首页</li>
<li>第一页</li>
<li>第二页</li>
</ul>
</body>
</html>
5.E：not（s）匹配不含有s选择器的元素E。例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
div:not(#div2){color: red;}
</style>
</head>
<body>
<div class="d1">块元素</div>
<div class="d1">块元素</div>
<div class="d1">块元素</div>
<div class="d2 d1">块元素</div>
<div class="d3" id="div2">块元素</div>
</body>
</html>
除了最后一行其他的全部为红色。
6.E：first-child（父元素的第一个子元素E）
要使该元素生效，E元素必须要是某个元素的子元素，一般元素都是body的子元素，所以都可以使用此伪类，
而body标签不是子元素，所以 body：first-child{ background：#ddd }是无效的。
这个属性的意思是被选中元素本身是子元素，并且是它父元素的第一个。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
li:first-child{color: red;}
/*ul li{display: inline-block;list-style: none;}*/
</style>
</head>
<body>
<ul>
<p>sdsdasd</p>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
</body>
</html>
此例有序列表下的第一个列表项为红色，无序列表下没有红色的因为p不是ul的子元素，而li也不是第一个了。
7.E：last-child 父元素的最后一个子元素E。例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
/*ul li{display: inline-block;list-style: none;}*/
li:last-child{color: red;}
</style>
</head>
<body>
<ul>
<p>sdsdasd</p>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
</body>
</html>
显示为无序和有序最后一个列表都为红色。
8.E：only-child 元素是唯一子元素时被匹配。例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
ul:only-child{color: red;}
</style>
</head>
<body>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ul>
</body>
</html>
此例显示li全部为红色。
9.E：empty ：empty选择器匹配没有子元素（包括文本节点）的每个元素。（不明白？）
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
p:empty{background-color: red;}
</style>
</head>
<body>
<p>这是练习段落</p>
<p></p>
</body>
</html>
10.E：checked ：checked选择器匹配每个已被选中的input元素（只用于单选按钮和复选框）。不适用于所有浏览器。
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
input:checked{background: red;}
</style>
</head>
<body>
<form action="" method="post">你喜欢什么吃的（多选）：
<input type="checkbox" name="fruit" id="apple"/><label for="apple">苹果</label>
<input type="checkbox" name="fruit" id="li"/><label for="li">梨</label>
<input type="checkbox" name="fruit" id="banana"/><label for="banana">香蕉</label>
</form><hr />
<form action="" method="post">你喜欢谁：
<input type="radio" name="xingbie" id="boy" /><label for="boy">男的</label>
<input type="radio" name="xingbie" id="girl" /><label for="girl">女的</label>
</form>
</body>
</html>
此例我用edge浏览器单选按钮点击后颜色变了。
11.E：nth-child（n）选择器匹配属于其父元素的第n个子元素，不论元素的类型。
n可以是数字、关键词或公式。
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
li:nth-child(2){font-size: 30px; color: orange;}
</style>
</head>
<body>
<ul>
<li>刘亦菲</li>
<li>范冰冰</li>
<li>杨幂</li>
<li>袁姗姗</li>
</ul>
</body>
</html>
此例范冰冰字体变为30像素，颜色是橘黄色。
扫一扫
1146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
