一、四大基本选择器

       1、统配选择器（*）：匹配页面中的所有元素。

             *{

              }

              例：页面中所有的元素都变成红色，背景是绿色

               *{

                     color:red;

                     background-color: darkseagreen;

                }

              如图：

        2、标签选择器：通过标签来匹配元素

              标签名{

               }

               例：

               p标签：字体颜色黑色，字体大小50像素

               div标签：高度和宽度都是100像素，颜色为#6495ED

                    p{
                    color: black;
                    font-size: 50px;
                     }
                    div{
                     width: 100px;
                     height: 100px;
                     background: #6495ED;
                    }

             运行效果如图：

        3、类选择器：匹配具备class属性的元素

             class=“类名”

             .类名{}

              例：

              给一个div添加class属性

                   <div class="div1">
                    我是小妖怪，逍遥又自在
                    </div>

               使用类选择器，选择div这个元素，调整样式

                    .div1{
                     height: 100px;
                     color: crimson;
                     }

              运行效果如图所示：

        4、id选择器：匹配具备id属性的元素（具备唯一性：id名不可重复，类似于身份证号）

              id=“id值”

              #id{

              }

              例：

              给div添加id属性：

               <div id="div2">
               id选择器
               </div>

              通过id选择div3调整样式：

              #div2{
              height: 100px;
              color: aquamarine;
              background: khaki;
              }

              运行效果如图所示：

注意：选择器有权重

选择器具有优先级：导致样式覆盖

优先级从小到大排列：统配选择器<标签选择器<类选择器<id选择器<内联样式（行内样式：style）

选择器的最高权重是：！important 关键字

例：

*{
  color: #DD0000;
 }

 p{
   color:blueviolet !important;
   font-size: 50px;
 }

.p1{
     color: red;
     font-size: 14px;
}

#p1{
     border: 1px solid pink;
     color: green;
     font-size: 20px!important;
}

<p class="p1"  id="p1" style="color: #00FFFF;">猜猜我是什么颜色？有多大？</p>

猜一猜？文字最终显示什么颜色，大小是多大？

运行效果如图：

可以看出文字最终显示为紫色，20像素