2019-06-26

CSS3

网上推荐的CSS书写规范

1.位置属性 (position, top, right, z-index, display, float等)　　
2.大小 (width, height, padding, margin)　　
3.文字系列 (font, line-height, letter-spacing, color- text-align等)　　
4.背景 (background, border等)
5.其他 (animation, transition等)

1.组合选择器:

在 CSS3 中包含了四种组合方式:
后代选取器(以空格分隔)    div p{ 表示div下面的p不管多少级都可以}
子元素选择器(以大于号分隔） div>p{表示只有div下面的p 一级关系}
相邻兄弟选择器（以加号分隔） div+p{表示div和p同级并且只选择同级的第一个p标签}
普通兄弟选择器（以破折号分隔）div~p{表示和div同级的所有p}

2.属性选择器

Will apply to:
Hello world
baidu.com

Will not apply to:
Hello!

格式:
[lang ^= en]
[lang *= en]  
[lang = en]  表示lang属性等于en这个值的
[lang |= en]
[lang ~= en]  表示lang属性里包含en这个值的

3.伪类选择器

常用动态伪类:
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。

其他伪类:
a:first-child 伪类来选择元素的第一个子元素
a:last-child 伪类来选择元素的最后一个子元素
a:not(:last-child) 伪类来选择元素的非最后一个子元素
a:lang(no)向带有指定 lang 属性的元素添加样式。

常用样式例子