级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器
后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
.container p{
color: red;
}
.container .item p{
color: yellow;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> #box p{ color: red; } </style> </head> <body> <div id="box" class="wrap"> <div id="box2" class="wrap2"> <div id="bo3" class="wrap3"> <p>猜猜我是什么颜色</p> </div> </div> </div> </body> </html>
子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
container>p{
color: yellowgreen;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> /*#box p{*/ /*color: red;*/ /*}*/ #box>p{ color: yellow; /*只选择下一级不深入选择所 哈哈哈 变黄，其余不变*/ } </style> </head> <body> <div id="box" class="wrap"> <p>哈哈哈</p> <div id="box2" class="wrap2"> <div id="bo3" class="wrap3"> <p>猜猜我是什么颜色</p> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> /*2 1 1*/ #box #box2 div .app{ color:yellow;; } /*2 1 1*/ /* 权重一样后面覆盖前面的，结果红色*/ #box #box2 .wrap3 p{ color:red; } </style> </head> <body> <div id="box" class="wrap"> <div id="box2" class="wrap2"> <div id="bo3" class="wrap3"> <p id="pa" class="app">猜猜我是什么颜色</p> </div> </div> </div> </body> </html>
并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器。
/*并集选择器*/
h3,a{
color: #008000;
text-decoration: none;
}
比如像百度首页使用并集选择器。
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
比如有一个<h4 class='active'></h4>这样的标签。
那么
h4{
100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 */
h4.active{
background: #00BFFF;
}
它表示两者选中之后元素共有的特性。