css学习笔记（持续更新ing）

属性

@charset:

@charset 'utf-8'

使用UTF-8编码唯一的好处是，国外的用户如果使用Windows XP英文版，浏览UTF-8编码的任何网页，无论是中文、还是日文、韩文、阿拉伯文，都可以正常显示，UTF-8是世界通用的语言编码，而如果用Windows XP英文版的IE6.0浏览gb2312语言编码的网页，则会提示是否安装语言包。因此，可能会失去很多的国外浏览者。使用gb2312编码的好处是，因为程序产生的网页文本使用ANSI编码格式，会比UTF-8文本编码节省一些体积，访问速度会稍微快一点点。 【注意】 使用UTF-8编码，有2个要注意：

【一】是网页的meta部分，必须有这句：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

【二】是网页的文本格式，必须保存为UTF-8格式，方法是用记事本打开网页，点击“文件→另存为”，在最后的Encoding，默认是ANSI，改为UTF-8 文件也存为utf-8格式。

@import:

用以引入一个css文件,如

    @import "mystyle.css";
    @import url("mystyle.css")

@media：

让我想起了sql 语句，and,not,only后面搭配媒体类型或媒体功能，媒体类型和媒体功能可以直接放到@media 后面，条件默认为only

@media only screen and (max-width:560px){
    color:black
}

@page:

@page 用于分页媒体访问网页的表现设置，emmm，网上相关资料好少，暂时搁置

@counter-style

兼容性差到爆,告辞

@keyframes

定义动画关键帧,可以使用百分比或from to作为关键帧选择器

@keyframes mymove{
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}

@support

判断浏览器是否支持某样式,兼容性较差

@support (display: flex) {
  //如果当前浏览器支持flex布局就设置为flex布局
  #demo {
    display: flex;
  }    
}

@ namespace

用于跟 XML 命名空间配合的一个规则,emmm,一脸懵逼，暂时搁置

@viewport

设置视口，内容与html视口基本一致

选择器

:only-child 选择唯一子元素

:nth-last-child(2) 倒数子元素选择器

b:first-of-type 选择某种类型的第一个子元素

a:nth-of-type(n) 选择某种类型的第n个子元素

a:nth-of-type(even|odd) 选择某种类型的奇数位置或偶数位置的子元素