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.属性选择器
<!DOCTYPE html>
<html>
<head>
<style>
[title]
{
color:blue; 表示把所有包含title这个属性的 变成蓝色
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="baidu.com" href="http://www.baidu.com/">baidu.com</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>
格式:
[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 属性的元素添加样式。
网友评论