CSS-02-css的三种基础选择器

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>css使用方法</title>
         <!---->
         <style type = "text/css">
              /*css代码*/

             /*id选择器*/
              #box{
                  /*color表示设置颜色*/
                  color:blue;
              }

              /*类选择器*/
             .box3{
                 color: cornflowerblue;
             }

             #p1{
                 color: red;
             }

             /*标签选择器*/
             p{
                 color: blueviolet;
             }
         </style>
         <!--这种方式的好处：让html代码和css代码分离，方便维护-->
         <link rel="stylesheet" type="text/css" href="style/next.css" />
     </head>
     <body>
         <!--通过自定义名字产生关联-->
         <div  id = "box">这是一个盒子</div>
         <div  id = "box2">这是一个盒子</div>
         <div  style = "color:green;" >这是一个盒子</div>
         <div class = "box3">这是一个box</div>
         <!--需求：把p标签的字体都设置为红色-->
         <p id="p1">这是p1</p>
         <div id="p1">这是p2</div>
         <p id="p1">这是p3</p>
         <p id="p1">这是p4</p>
         <!--需求：把p标签的字体都设置为红色-->
         <p >这是p1</p>
         <p >这是p2</p>
         <p >这是p3</p>
         <p >这是p4</p>
     </body>
 </html>