A我今天学到了什么
1,水平居中(内联元素和内联块
1 display:block
//HTML
<span>span</span> <br/>
<button>btn</button>
//css
<style>
span,button{
display:block;
width:100px;
margin-left:auto;
margin-right:auto;
}
</style>
2 给父级加text-align:center
//HTML
<div>
<span>span</span> <br/>
<button>btn</button>
</div>
//css
<style>
div{
text-align:center
}
</style>
2,选择器
1 css元素选择器
2 class元素
3 id选择器
//HTML
<p class=”test” id=”two”>hello world</p>
//css
<style>
//元素选择器
p{}
//class选择器
.test{}
//id选择器
#two{}
</style>
4伪类选择器hover,focus
//HTML
<input type="text"/>
<p>hello world</p>
//css
input:focus{
background-color:red;
}
p:hover{
color:pink;
}
5分组选择器
//HTML
<div>div</div>
<span>span</span>
<p>hello world</p>
//css
div,span,p{
color:pink;
}
6后代选择器
//HTML
<div>
<p>hello world</p>
<p>hello world</p>
<ul>
<li><p>hello world</p></li>
<li><p>hello world</p></li>
</ul>
</div>
div>p //选取div所有[子元素]为p的标签
//css
div>p{
color:pink;
}
div p //选取div之后的所有元素
//css
div p{
color:red;
}
7兄弟选择器
//HTML
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
div+p //选中div之后的第一个p元素
//css
div+p{
color:red;
}
div~p //选中div之后的所有p元素
//css
div~p{
color:red;
}
8伪元素
//HTML
<p>hello world</p>
//css
p:before{
content:"我是前面";
display:block;
}
p:after{
content:"我是后面";
display:block;
}
9属性选择器(了解)
//HTML
<p class="one">hello world</p>
//css
<style>
p[class="one"]{
color:red;
}
</style>
3选择器的优先级
//HTML
<div class='test' id='first'>hello world</div>
~~
元素选择器<class选择器<ID选择器<!important
div{color:pink}<.test{color:blue}<#first{color:yellow}<div{color:red !important}
B今天我掌握了什么
1,水平居中(内联元素和内联块
1 display:block
//HTML
<span>span</span> <br/>
<button>btn</button>
//css
<style>
span,button{
display:block;
width:100px;
margin-left:auto;
margin-right:auto;
}
</style>
2 给父级加text-align:center
//HTML
<div>
<span>span</span> <br/>
<button>btn</button>
</div>
//css
<style>
div{
text-align:center
}
</style>
2,选择器
1 css元素选择器
2 class元素
3 id选择器
//HTML
<p class=”test” id=”two”>hello world</p>
//css
<style>
//元素选择器
p{}
//class选择器
.test{}
//id选择器
#two{}
</style>
4伪类选择器hover,focus
//HTML
<input type="text"/>
<p>hello world</p>
//css
input:focus{
background-color:red;
}
p:hover{
color:pink;
}
5分组选择器
//HTML
<div>div</div>
<span>span</span>
<p>hello world</p>
//css
div,span,p{
color:pink;
}
6后代选择器
//HTML
<div>
<p>hello world</p>
<p>hello world</p>
<ul>
<li><p>hello world</p></li>
<li><p>hello world</p></li>
</ul>
</div>
div>p //选取div所有[子元素]为p的标签
//css
div>p{
color:pink;
}
div p //选取div之后的所有元素
//css
div p{
color:red;
}
7兄弟选择器
//HTML
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
div+p //选中div之后的第一个p元素
//css
div+p{
color:red;
}
div~p //选中div之后的所有p元素
//css
div~p{
color:red;
}
8伪元素
//HTML
<p>hello world</p>
//css
p:before{
content:"我是前面";
display:block;
}
p:after{
content:"我是后面";
display:block;
}
9属性选择器(了解)
//HTML
<p class="one">hello world</p>
//css
<style>
p[class="one"]{
color:red;
}
</style>
3选择器的优先级
//HTML
<div class='test' id='first'>hello world</div>
~~
元素选择器<class选择器<ID选择器<!important
div{color:pink}<.test{color:blue}<#first{color:yellow}<div{color:red !important}
C今天我没掌握什么
4伪类选择器hover,focus
//HTML
<input type="text"/>
<p>hello world</p>
//css
input:focus{
background-color:red;
}
p:hover{
color:pink;
}
5分组选择器
//HTML
<div>div</div>
<span>span</span>
<p>hello world</p>
//css
div,span,p{
color:pink;
}
6后代选择器
//HTML
<div>
<p>hello world</p>
<p>hello world</p>
<ul>
<li><p>hello world</p></li>
<li><p>hello world</p></li>
</ul>
</div>
div>p //选取div所有[子元素]为p的标签
//css
div>p{
color:pink;
}
div p //选取div之后的所有元素
//css
div p{
color:red;
}
7兄弟选择器
//HTML
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
div+p //选中div之后的第一个p元素
//css
div+p{
color:red;
}
div~p //选中div之后的所有p元素
//css
div~p{
color:red;
}
8伪元素
//HTML
<p>hello world</p>
//css
p:before{
content:"我是前面";
display:block;
}
p:after{
content:"我是后面";
display:block;
}
9属性选择器(了解)
//HTML
<p class="one">hello world</p>
//css
<style>
p[class="one"]{
color:red;
}
</style>
3选择器的优先级
//HTML
<div class='test' id='first'>hello world</div>
~~
元素选择器<class选择器<ID选择器<!important
div{color:pink}<.test{color:blue}<#first{color:yellow}<div{color:red !important}
