领跑计划Day004Css

Posted 2021-12-11 师兄白泽

引入Css及Css选择器

1.引入css

1. 行内样式（行间样式）

   <div style="background-color: red;"></div>
   

2. 内部样式

   <style>
           /* 设置边框 */
           table,
           td {
               border: 1px solid #333;
           }
           thead,
           tfoot {
               background-color: #333;
               color: #fff;
           }
   </style>
   

3. 外部样式

   <link rel="stylesheet" href="./index.css">
   

2.选择器

选择器分类

1. 类选择器

   .class{
   
   }
   

2. id选择器

   #id{
   
   }
   

3. 标签选择器

   h1{
   
   }
   

4. 属性选择器

   [id="sex"]{
   
   }
   

5. 通配符选择器

   *{
   
   }
   

6. 伪类选择器

   p:after{
   
   }
   

7. 伪元素选择器

   p::after{
   
   }
   

8. 兄弟选择器

   p,p{
   
   }
   

9. 父子选择器

   p>p{
   
   }
   

10. 后代选择器

    p p{
    
    }
    

权重：

!important > 行间样式 > id选择器 > 属性/类/伪类>标签/伪元素>通配符

!important Infinity

行间样式 1000

id选择器 100

属性/类/伪类10

标签/伪元素 1

通配符 0