css基础笔记2-------选择器及交互

隐藏方式：

溢出隐藏：overflow: hidden; 不占位置
是否可见：visibility: hidden; 占位置
消失：display: none; 不占位置
透明度：opacity：0；（0-1 ）占位置

定位

当页面上发生重叠时

相对：relative 不脱离文档流 可重叠别人
绝对：absolute 脱离文档流
固定：fixed 脱离文档流
默认;static 只是属性没有实际意义

相对：relative 不脱离文档流 可重叠别人
position: relative;
left: 100px;
top: 10px;/相当于原来的位置/

不脱离文档流 可重叠别人 相当于原来的位置移动

绝对：absolute 脱离文档流
脱离文档流
position: absolute;
right: 20px;
/相对于谁是发生改变的 如果祖先元素有定位属性，相对于该元素（最近的）,
如果祖先元素没有定位属性相对于body/

固定：fixed 脱离文档流
固定于浏览器
z-index:调整层级（-1-999）（需要设置定位属性）
无法调整父子，可兄弟
弹框直接放在body下面

匹配选择器：

全匹配

/*全匹配 每个值都要一样*/
input[type="text"]{
    width: 100px;
    height: 100px;
}

自定义属性

div[wode="nihao"]{
    width: 100px;
    height: 100px;
    background-color: #000;
}

开头匹配^

/*开头匹配*/
div[wode^="ni"]{
    width: 100px;
    height: 100px;
    background-color: #EEEE11;
}

结尾匹配$

div[wode$="ao"]{
    width: 100px;
    height: 100px;
    background-color: #11EE11;
}

模糊匹配*

/*包含匹配*/
div[wode*="h"]{
    width: 100px;
    height: 100px;
    background-color: #eec0c0;
}

结构性伪类选择器

第一个类型

section>div:first-of-type{/*第一个*/
    color: red;
}

最后一个类型

section>div:last-of-type{/*最后一个*/
    color: #d8ff47;
}

第几个类型

section>div:nth-of-type(2){/*section下面的第二个div*/
    color: #0fff22;
}

第一个孩子

section>div:first-child{
    /*第一个儿子*/
}

最后一个孩子

section>div:last-child{
    /*最后一个儿子*/
}

第几个孩子

section>div:nth-child(2){
    /*第二个儿子*/
    /*保证第二个儿子是div标签才能被选中*/
}

唯一的孩子
/*only-child */

section div:only-child{
    /*满足条件：section下面的唯一的一个div*/
}

反选：除了id为xx的其他所有孩子

section div:not(#div1){
    /*选中section下面的div并且id不是div1的div标签*/
    color: red;
}

兄弟选择器

不能选择哥哥
相邻的弟弟

section #div1+div{/*相邻的弟弟*/
}

所有的弟弟

section #div1~div{/*所有的弟弟*/
}

目标伪类选择器

input:checked{/*选中的情况下改变样式*/
    width: 50px;
    height: 50px;
}
::selection{/*选中的情况下改变样式*/
    background-color:pink;
    color: white;
}

拓展

复合型

section div:not(:first-child){
    color: green;
}/*section的div里不是第一个孩子的*/
body>section:first-of-type>div:first-of-type{
color: yellow;
}/*body的第一个section的第一个div*/
section:first-of-type>#div1~div{
color: #3a75ff;
}/*body的第一个为section的id为div1的所有的弟弟*/

display: inline-block;/将元素转化为具有块元素属性的行内元素/
/display: block; 将元素转化为块元素/
/display: inline; 将元素转化为行内元素/
after：
例子：对话框

#mydiv{
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    background-color: pink;
    color: black;
    margin-bottom: 100px;
    position: relative;
}
#mydiv:after{
    content: '\25E4';
    color: pink;
    font-size: 25px;
    position: absolute;
    bottom: -30px;
    left: 30px;
}

效果图：

before：
过渡： 属性 速度 线性
/transition: all 2s linear;/
transition: bottom 2s linear , color 2s linear , background-color 2s linear;

例子

#div1{
   width: 200px;
    font-size: 0;
    border: 1px solid red;
    position: relative;
    overflow: hidden;
}
#div1 img{
    width: 100%;
}
#div1:before{
    content: '这是一个是瓜皮';
    background-color: #000;
    font-size: 14px;
    color: red;
    width: 200px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    /*transition: bottom 2s linear , color 2s linear , background-color 2s linear;*/
    transition: all 2s linear;
    bottom: -30px;
    display: inline-block;/*将元素转化为具有块元素属性的行内元素*/
    /*display: block; 将元素转化为块元素*/
    /*display: inline;  将元素转化为行内元素*/
}
#div1:hover:before{
    bottom: 0;
    color: green;
    background-color: pink;
}