以下是5種選擇器
1標(biāo)簽選擇器
<!DOCTYPE html>
<html>
<head>
<title>05-CSS選擇器1</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- css選擇器
標(biāo)簽選擇器
p{
}
-->
<style type="text/css">
a{
color:red;
}
</style>
</head>
<body>
<a> This is my HTML page. </a><br>
</body>
</html>
2類選擇器
<pre>
<!DOCTYPE html>
<html>
<head>
<title>07CSS選擇器</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
.c{
color:red;
}
</style>
</head>
<body>
<p class='c'>床前明月光</p>
</body>
</html>
</pre>
3 id選擇器
<pre>
<!DOCTYPE html>
<html>
<head>
<title>06CSS選擇器</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
#one{
color:red;
}
</style>
</head>
<body>
<a id='one'> 點(diǎn)我 </a>
</body>
</html>
</pre>
4偽類選擇器
<pre>
<!DOCTYPE html>
<html>
<head>
<title>06CSS選擇器</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
#one:link{
color:blue;
}
#one:visited{
color:black;
}
#one:hover{
color:white;
}
#one:active{
color:pink;
}
</style>
</head>
<body>
<a id='one' href="01-結(jié)合方式1.html"> 點(diǎn)我 </a>
</body>
</html>
</pre>
5 組合使用選擇器
<pre>
<!DOCTYPE html>
<html>
<head>
<title>05-CSS選擇器1</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
#one,.two,font{
color:red;
}
</style>
</head>
<body>
<a id='one' > 點(diǎn)我 </a><br>
<p class='two'>點(diǎn)我</p><br>
<font>點(diǎn)我</font>
</body>
</html>
</pre>
