Day03

一.css样式中的属性

1.1.盒子模型的传参

此方法可不改变内联标签和内联块的display属性 实现水平居中

三.选择器

1.1.兄弟选择器

div+p{
            color:red;
        }
div~p{
            color:red;
        }


    
div
    
hellow
    
hellow
    
hellow
    
hellow
    
    

兄弟选择器
div+p{} 选择div之后的第一个p元素
div~p{} 选中di之后的所有的p元素

1.2.分组选择器

 


    
hellow world
    
h1
    
div

1.3.后代选择器

.parent>p{
            color:red;
        }


    
    


    

        
hellow 
        
hellow
        

            
hellow
            
     

.parent>p{} 亲儿子 选择parent之后的所有p元素

1.4.属性选择器

p[class="one"]{
            color:red;

        }
    

    


    

        hellow 
    

1.5.选择器的优先级排列

  p{
            color:red !important;
        }
        .one{
            color:yellow;
        }
        #two{
            color:green;
        }
    


    
hello world

排列： ! important > id> class > p{ }

1.6.选择器的权重

   */
        .child{
            color:red;
        }
        .parent{
            color:green;
        }
    
    


    
——————嵌套层次较浅
        
child
——————嵌套层次较深
        

嵌套层次深的权重比较重，优先调用