01 标签选择器
一般用来给所有元素做一些通用性的设置(效率比较低,尽量不要使用)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div, p, h2, span {color: white;background-color: orange;}</style>
</head>
<body><div>div元素</div><p>p元素</p><div><h2>h2元素</h2><p>p元素 <span>span元素</span></p></div>
</body>
</html>
02 简单选择器
在同一个HTML文档中,同一个id不要重复
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: red;}.box2 {color: green;}#box3 {color: orange;}</style>
</head>
<body><div>box1</div><div class="box2">box2</div><div id="box3">box3</div>
</body>
</html>
03 属性选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>[title] {background-color: orange;}[title="box3"] {background-color: red;}</style>
</head>
<body><div title>box2</div><div title="box3">box3</div>
</body>
</html>
