Html5与CSS3(选择器)

<!--
作者：offline
时间：2018-03-21
描述：1.全选择器
*{属性1:属性值2；属性2：属性值2；...；}
2.元素（标签）选择器
标签名{属性1:属性值2；属性2：属性值2；...；}
元素（标签）选择器优先与全选择器
3.类（class）选择器
.类名{属性1:属性值2；属性2：属性值2；...；}
类选择器高于全选择器
类选择器高于元素选择器
4.id选择器
#id名{属性1:属性值2；属性2：属性值2；...；}
id的优先级高于类选择器，元素选择器，全选选择器
5.分组(对于标签而言)选择器
标签名1，标签名2{属性1:属性值2；属性2：属性值2；...；}
6.子代选择器
标签名>标签名{属性1:属性值2；属性2：属性值2；...；}
7.后代选择器
标签名 标签名{属性1:属性值2；属性2：属性值2；...；}

-->

 <!DOCTYPE html >
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
     <head>
         <meta  http-equiv="content-type" content="text/html; charset=utf-8">
         <title></title>
         <style type="text/css">

             p,span,h1,h2{

                font-size: x-large;

             }
             .c1{
                 background-color: #7FFF00;
             }
             p{
                 background-color: cadetblue;
             }

             #d1{
                 width: 600px;
                 height: 500px;
                 font-family: "agency fb";
                 border: 1px solid yellow;
             }
             #d2{
                 width: 400px;
                 height: 300px;
                 font-family: "agency fb";
                 border: 1px solid goldenrod;
             }

             #d1>span{
                 color: #DAA520;
             }
             #d1 span,h1,h2{
                 color:chartreuse;
             }

         </style>
     </head>
     <body>

         <p>段落标签</p>
         <span class="c1" >文本标签</span>
         <div id="d1">
             <span>文本标签</span>
             <span></span>
             <div id="d2">
                 <h1>一级标签</h1>
                 <h2>二级标签</h2>
             </div>
         </div>

     </body>
 </html>