1标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器</title>
<style>
div{
color:pink;
}
</style>
</head>
<body>
<div>one</div>
<p>two</p>
</body>
</html>
2 ID选择器
id属性是唯一的,根据属性去选择具体的id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#one{
color:red;
}
#two{
color:pink;
}
</style>
</head>
<body>
<div id="one">id1</div>
<div id="two">id2</div>
</body>
</html>
3类选择器
类名称前面记得前面加上.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.one{
color:red;
}
.two{
color:blue;
}
</style>
</head>
<body>
<div class="one">一</div>
<div class="two">二</div>
<div class="three">三</div>
</body>
</html>
4通用选择器
通过使用通配符“*”,所有的将都会被使用,在不考虑选择器优先级的情况下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
color:red;
}
</style>
</head>
<body>
<div id="ten" class="数字">这是数字</div>
<div class="字母">这是字母a</div>
<div id="three">这是数字三</div>
<p>这是四</p>
</body>
</html>