CSS选择器(了解)
以下是5种选择器
1标签选择器
<!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选择器
标签选择器
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'> 点我 </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-结合方式1.html"> 点我 </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' > 点我 </a><br>
<p class='two'>点我</p><br>
<font>点我</font>
</body>
</html>
</pre>
