选择器

，

vw     1vw = 视口宽度的 1%            1vh = 视口高度的 1%

vmin 

vmax

@media

@media screen

@media print

@media screen print

@media only screen and (max-width: 500px)     如果浏览器窗口小于 500px,  

orientation：portrait | landscape     竖屏 | 横屏

@media only screen and (orientation: landscape){

 viewport  http://www.cnblogs.com/2050/p/3877280.html

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a:hover, li:nth-child）

10.组合选择器  #myid , h1

11. 同时 拥有2个类    .classA.classB

组合选择符

h1,h2,h3    和

div p        所有后代 p

div>p       所有子元素p

div+p      之后的第一个兄弟p

div~p      之后的所有兄弟p

伪类

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

a.red:visited {color:#FF0000;}    配合使用

p:first-child          1. 选中所有p     2. 1中的第一个

p>i:first-child       p中的所有i         的第一个

p>first-child i        所有p中的第一个  中的所有i

所有伪类

:link                      a:link    选择所有未访问链接

:visited                  a:visited    选择所有访问过的链接

:active                   a:active    选择正在活动链接

:hover                    a:hover    把鼠标放在链接上的状态

:focus                    input:focus    选择元素输入后具有焦点

:first-letter              p:first-letter    选择每个元素的第一个字母

:first-line                p:first-line    选择每个元素的第一行

:first-child              p:first-child        选择匹配  属于某元素的第一个子元素的 p     兄弟中排第一的p

:nth-child(n)           p:nth-child(2)    选择匹配  属于某元素的第 n 个子元素的 p     兄弟中排第 n 的        tr:nth-child(even)  奇数行

li:first-child:nth-last-child(n+4)

:last-child

:first-of-type          

:nth-of-type(n)        p:nth-of-type(2)         同类型 兄弟中  排第 n 的 p

:last-of-type

:only-child

:only-of-type

:before                  p:before    Insert content before every element

:after                     p:after    在每个元素之后插入内容

:lang(language)            p:lang(it)    为元素的lang属性选择一个开始值

empty    enabed  disabled  checked   

selector:not(selector)              div:not(#container)  反取

:not(selector):                         not(p)选择每个并非p元素的元素

::selection                              ::selection匹配元素中被用户选中或处于高亮状态的部分

属性选择器

[title]

[title=titlename]

[title~=titlename]

[lang |=titlename]

[attribute^=value]   a[src^="https"]             src属性的值以"https"开头的元素       正则表达式

[attribute$=value]   a[src$=".pdf"]              src属性的值以".pdf"结尾的元素

[attribute*=value]    a[src*="runoob"]          src属性的值包含子字符串"runoob"的元素

CSS Display - 块和内联元素

块级元素   会独占一行，其宽度自动填满其父元素宽度，在前后都是换行符。 h1  p   div   ul  li 

内联元素   只需要必要的宽度，不强制换行，一行排不下，才会换行，其宽度随元素的内容变化：span  a    img  label  input 

块级元素可以设置 width, height属性，行内元素设置width,  height无效 【注意：块级元素即使设置了宽度，仍然是独占一行的】

块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

相互转换 display:inline;   display:block;

display: inline | block | none | inline-block 

行内元素是无法设置其宽和高的,行内块元素实际就是把块元素以行的形式展现,保留了块元素可以设置的对应CSS属性

行内样式 >  id声明的样式  >class声明的样式

css文件 中 后面class 覆盖前面 class

子元素样式 覆盖 继承来的样式

行内样式 >  id声明的样式  >class声明的样式     border:red; 会覆盖 继承来的 border-color:black;  以及  border-width:5px;

width height 是指 content 的高宽          只有在 ie6 是指  内容、内边距和边框的宽度的总和

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。

解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。

pointer-events  让元素不捕获事件，可以理解为让他看得见摸不着

user-select: none;   禁止选择文本

will-change    gpu 加速

quirks    standard   !doctype