<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
<style>
div{
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<div>昨天是个好日子</div>
<div>今天是个好日子</div>
<div>明天是个好日子</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ID选择器</title>
<style>
#div1{
color: red;
}
#div2{
color: gold;
}
#div3{
color: greenyellow;
}
</style>
</head>
<body>
<div id="div1">昨天是个好日子</div>
<div id="div2">今天是个好日子</div>
<div id="div3">明天是个好日子</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
.song{
color: gold;
font-size: 30px;
}
</style>
</head>
<body>
<div class="song">青花瓷</div>
<div class="song">东风破</div>
<div class="song">烟花易冷</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
a[href][title='a']{
color: yellow;
}
a[title='b']{
color: darkblue;
}
</style>
</head>
<body>
<a href="#" title="a">张三</a>
<a href="#" title="b">李四</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style>
p em{
color: yellow;
}
</style>
</head>
<body>
<p>
<em>我是儿子斜体</em>
<strong>
<em>我是孙子斜体</em>
</strong>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子元素选择器</title>
<style>
p>em{
color: yellow;
}
</style>
</head>
<body>
<p>
<em>我是儿子斜体</em>
<strong>
<em>我是孙子斜体</em>
</strong>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
a:link{color: blue;} /*未点击*/
a:visited{color: red;} /*已点击*/
a:hover{color: yellow;} /*鼠标放在链接上但未点击*/
a:active{color: green;} /*鼠标点击但未松开*/
</style>
</head>
<body>
<a href="#">我是链接</a>
</body>
</html>
浙公网安备 33010602011771号