1.id选择器（与元素一一对应的关系）
html代码
<html>
<head>
<meta charset="utf8"/>
</head>
<body>
<link rel="stylesheet" type="text/css" href="test.css">
</link>
<div id="only">123</div>
</body>
</html>
css代码
#only{
background-color: red;
}
2.类选择器 class 是多对多的关系
HTML代码
<html>
<head>
<meta charset="utf8"/>
</head>
<body>
<link rel="stylesheet" type="text/css" href="test.css">
</link>
<div class="demo">567</div>
<div class="demo">890</div>
</body>
</html>
CSS代码
.demo
{
background-color:yellow;
}
3.标签选择器
HTML代码
<html>
<head>
<meta charset="utf8"/>
</head>
<body>
<link rel="stylesheet" type="text/css" href="test.css">
</link>
<div >567</div>
<div >890</div>
</body>
</html>
CSS代码
div
{
background-color:yellow;
color:red;
}
4.通配符选择器
HTML代码
<html>
<head>
<meta charset="utf8"/>
</head>
<body>
<link rel="stylesheet" type="text/css" href="test.css">
</link>
<div >567</div>
<div >890</div>
</body>
</html>
CSS代码
*
{
background-color:yellow;
color:red;
}