CSS选择器1-复习

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>元素样式的来源</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <h1 style="color: red; background:pink;">1 Hello World!</h1>
     <h1 title="hello">2 Hello World!</h1>
     <h1 id="a">3 Hello World!</h1>
     <h1 class="b">4 Hello World!</h1>
     <div>
         <p>html是一个具有层叠结构的文档，可以根据元素之间层级关注，实现样式复用</p>
         <a href="#">样式继承</a>
         <h3 style="color: grey;">hello</h3>
     </div>
     <!-- 1.元素级：行业样式/内连样式  style="color: red;"> -->
     <!-- 2.内部样式/文档样式 <style> -->
     <!-- 3.外部样式表 -->
     <!-- 4.默认样式，最低自带的 -->
     <!-- 5.继承继承的样式最低 -->
     <style>
         /* h1 {
            color: blue; 
         } */
         div {
             /* div是p的父级 */
             border: 1px solid #000;
             color:violet;
         }
         p {
             /* color:green; */
             color: inherit;
         }
         a {
             color: inherit;
         }
         h1[title="hello"]{
             color:goldenrod;
         }
         h1[id="a"]{
             color:blueviolet;
         }
         h1#a,h1.b{
             background-color: darkblue;
         }
         html body *{
             background-color: grey !important;
         }
     </style>
 </body>
 </html>
相关文章
