后代选择器 即标签里所有后代都会使用css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div span{
color: red;
}
</style>
<body>
<div>
<span>这是一个段落</span>
<p>
<span>这是一个段落</span>
</p>
</div>
</body>
</html>
子代选择器 只有儿子标签会使用css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div>span{
color:red
}
</style>
<body>
<div>
<span>这是一个段落哦</span>
<p>
<span>这是一个段落</span>
</p>
</div>
</body>
</html>
交集选择器 即写上的所有标签都会使用css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 把三个标签的颜色都改为红色 */
div,
p,
span{
color: red;
}
</style>
<body>
<div>这是一个段落</div>
<p>这是一个段落</p>
<span>这是一个段落</span>
</body>
</html>
交集选择器 同时满足条件的标签才会使用css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 即是span标签又要是class="cs" */
span.cs{
color:red;
}
</style>
<body>
<span class="cs">这是一个段落</span>
<p class="cs">这是一个段落</p>
<span>这是一个段落</span>
</body>
</html>