day02

A我今天学到了什么

1,水平居中(内联元素和内联块

1 display:block

//HTML
span 

btn

//css

2 给父级加text-align:center

//HTML

  span 

  btn

//css

2,选择器

1 css元素选择器

2 class元素

3 id选择器

//HTML
hello world
//css

4伪类选择器hover,focus

//HTML

hello world
//css
input:focus{
  background-color:red;
}
p:hover{
  color:pink;
}

5分组选择器

//HTML
div
span
hello world
//css
div,span,p{
 color:pink;
}

6后代选择器

//HTML

  
hello world
  
hello world
  

    
hello world
    
hello world
  

div>p //选取div所有[子元素]为p的标签

//css
div>p{
  color:pink;
}

div p //选取div之后的所有元素

//css
div p{
  color:red;
}

7兄弟选择器

//HTML
div
hello world
hello world
hello world

div+p //选中div之后的第一个p元素

//css
div+p{
  color:red;
}

div~p //选中div之后的所有p元素

//css
div~p{
  color:red;
}

8伪元素

//HTML
hello world

//css
p:before{
  content:"我是前面";
  display:block;
}
p:after{
  content:"我是后面";
  display:block;
}

9属性选择器(了解)

//HTML
hello world
//css

3选择器的优先级

//HTML
hello world
~~
元素选择器

B今天我掌握了什么

1,水平居中(内联元素和内联块

1 display:block

//HTML
span 

btn

//css

2 给父级加text-align:center

//HTML

  span 

  btn

//css

2,选择器

1 css元素选择器

2 class元素

3 id选择器

//HTML
hello world
//css

4伪类选择器hover,focus

//HTML

hello world
//css
input:focus{
  background-color:red;
}
p:hover{
  color:pink;
}

5分组选择器

//HTML
div
span
hello world
//css
div,span,p{
 color:pink;
}

6后代选择器

//HTML

  
hello world
  
hello world
  

    
hello world
    
hello world
  

div>p //选取div所有[子元素]为p的标签

//css
div>p{
  color:pink;
}

div p //选取div之后的所有元素

//css
div p{
  color:red;
}

7兄弟选择器

//HTML
div
hello world
hello world
hello world

div+p //选中div之后的第一个p元素

//css
div+p{
  color:red;
}

div~p //选中div之后的所有p元素

//css
div~p{
  color:red;
}

8伪元素

//HTML
hello world

//css
p:before{
  content:"我是前面";
  display:block;
}
p:after{
  content:"我是后面";
  display:block;
}

9属性选择器(了解)

//HTML
hello world
//css

3选择器的优先级

//HTML
hello world
~~
元素选择器

C今天我没掌握什么

4伪类选择器hover,focus

//HTML

hello world
//css
input:focus{
  background-color:red;
}
p:hover{
  color:pink;
}

5分组选择器

//HTML
div
span
hello world
//css
div,span,p{
 color:pink;
}

6后代选择器

//HTML

  
hello world
  
hello world
  

    
hello world
    
hello world
  

div>p //选取div所有[子元素]为p的标签

//css
div>p{
  color:pink;
}

div p //选取div之后的所有元素

//css
div p{
  color:red;
}

7兄弟选择器

//HTML
div
hello world
hello world
hello world

div+p //选中div之后的第一个p元素

//css
div+p{
  color:red;
}

div~p //选中div之后的所有p元素

//css
div~p{
  color:red;
}

8伪元素

//HTML
hello world

//css
p:before{
  content:"我是前面";
  display:block;
}
p:after{
  content:"我是后面";
  display:block;
}

9属性选择器(了解)

//HTML
hello world
//css

3选择器的优先级

//HTML
hello world
~~
元素选择器

这些有点默生