通配符选择器*效率很低，它会先遍历每一个标签，然后在给标签添加属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
/*
.d1{
color: blue; 类选择器
}
#p1{
color: blue; id选择器
}
.p2{
color:rgb(200,200,200);
}
*/
/**{
color:red; 通配符
}
*/
/*.bb+p{
color: red; 相邻兄弟选择器
}*/
/*.d2~div{
color: red; 通用兄弟选择器
}*/
/*.div p{
color: red; 后代选择器
}*/
/*.di1>p{
color:red; 子元素选择器
}*/
/*.ddd p,.iii h4{
color:red; 并集选择器
}*/
p.p11{
color:red;
}
</style>
</head>
<body>
<!-- 选择器
1，标签选择器
2，类选择器
3，id选择器
4，通配符选择器（通用选择器） *
5，相邻兄弟选择器 + 紧挨着的标签生效，中间用+连接
6，通用兄弟选择器 ~ 同属一个父元素，用~连接
7，后代选择器 一个父元素里面的所有元素都是这个父元素的后代元素，无论它嵌套了几次
用空格连接
8，子元素选择器 > 父元素下的直接子代元素，不包括嵌套元素，用>连接
9，并集选择器 , 将两个需要同一样式缺所属不同元素的元素所需样式合并在一起，用,连接
10，交集选择器 将多个元素中间相同的元素提取出来设定样式，用交集选择器，中间不加
任何符号，用标签名+规定的类/规定的id表示
例如：p.div1{
} 或者
p#div1{
}
<-->
<!-- <div class="d1">内容1</div>
<p class="d2">内容2</p>
<div>内容3</div>
<div>
内容4
</div>
<p class="bb">内容5</p>
<p>内容6</p>
<p id="p1">内容7</p>
<div class="div">
<p class="p3">内容8</p>
<p class="p4">内容9</p>
<p>
内容10
<p>内容11</p>
</p>
</div>
-->
<!-- <div class="di1">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容
<div>
<p>内容
<p>内容</p>
</p>
</div>
</p>
</div> -->
<!-- <div class="ddd">
<p>111</p>
</div>
<div class="iii">
<div>222</div>
<h4>333</h4>
</div>
} -->
<!--
下面的情况，有两个p标签，有两个相同的class，如果只想将第一个p标签单独改变样式，就需要
用到交集选择器。 -->
<p class="p11">111</p>
<h4 class="p11">222</h4>
<p>333</p>
<div>444</div>
</body>
</html>