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>
04 后代选择器
4.1 所有后代
选择器之间用空格分割
<!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>.box1 span {color: red;}</style>
</head>
<body><div class="box1"><div><span>我是span元素1</span></div></div><div class="box1"><div><span>我是span元素2</span></div></div>
</body>
</html>
4.2 4.2 直接子代
使用>连接
<!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>.box1 > span {color: red;}</style>
</head>
<body><div class="box1"><span>直接子带span元素</span><div><span>我是span元素1</span></div></div><div class="box2"><div><span>我是span元素2</span></div></div>
</body>
</html>
05-兄弟选择器
5.1 相邻兄弟选择器
使用+连接
<!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 + div {color: red;}</style>
</head>
<body><div class="one">123</div><div>456</div><div>789</div>
</body>
</html>
5.2 普遍兄弟选择器
<!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 ~ div {color: red;}</style>
</head>
<body><div class="one">123</div><div>456</div><div>789</div>
</body>
</html>
