0502

1.css3媒体查询
媒体查询 做屏幕适配，pc，移动端
根据不同的设备显示不同的box
all所有设备
screen 屏幕设备 电脑 ipaid 手机
print 打印设备
not print 不包含打印设备
不加限制条件 所有的屏幕共有样式
写min-width 注意：从小到大去写
写max-width 注意：从大到小去写
内部样式写法

 @media screen and (min-width: 320px) {
                    .box{
                        width: 310px;
                    }
        }

外部样式写法

<link rel="stylesheet" href="./css/sc1.css" media="screen and (min-width:320px)"/>

2.css3选择器
ul>li:first-child{color: red;}
ul>li:last-child{color: blue;}
.box:before{content: “hello”;}content内容之前
.box:after{content: “world”;}content内容之后
ul>li:first-child~li{ color: #ffe249;} ~当前元素之后的所有同类型元素
ul>li:first-child+li{ color: #ffe249;}当前元素之后紧跟的元素
input[type^=t]{color: red; }type值以t开头
input[type$=t]{color: red; }type值以t结尾
input[type*=t]{color: red;}type值包含t
ul>li:first-of-type{border: 1px solid red; }选择当前元素子集里面li的第一个元素
ul>li:last-of-type{border: 1px solid red;}
ul>p:only-of-type{color: red;}找父元素里面仅有一个同类别标签
ul>li:nth-child(2){border: 1px solid red;}选择子元素括号里面写序号从前往后数第二个li
ul>li:nth-last-child(2){ border: 1px solid red; }从后往前数第二个li
:checked选择
::selection 选择
:disabled{border: 1px solid red;}不可用
:enabled{ border: 1px solid blue;}可用 可不可用只针对input框
ul>*:not§{ border: 1px solid red;}除去p

opacity: 0;完全透明
opacity: 1;完全不透明