标签：
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
id
#para1 { text-align:center; color:red; }
class
把#换成.
分组
h1,h2,p
{
color:green;
}
嵌套//注意既然能嵌套,说明class="marked"的元素包含p,好比行内样式
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
分4种.
1.后代 //div里面的所有p
div p
{
background-color:yellow;
}
2.子
div>p //只能提取div里面下一层的p,不能提取下下层.
//上面两种是在div内部处理;下面是在div同层处理,也就是如果后面的p被包含在其他元素里则不会显示效果.
3.相邻兄弟
div+p //对一个div只能选一条,就是div后同层次的那个p
4.普通兄弟选择器
div~p //取div后的所有同层次的p;
也可以看作成一种选择器;具体有链接4种,focus,5个跟位置有关,lang. 具体看CSS伪类/w3c
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 之后，才是有效的。
注意：伪类的名称不区分大小写。
伪类有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
书写的时候伪类用: ,伪元素用::
<!DOCTYPE html>
<html>
<head>
<style>
p::before
{
content:"Read this -";
}
</style>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<p><b>Note:</b> For :before to work in IE8, a DOCTYPE must be declared.</p>
</body>
</html>
下面的例子是把包含标题（title）的所有元素变为蓝色：
[title]
{
color:blue;
}
下面的实例改变了标题title=‘w3cschool‘元素的边框样式:
[title=w3cschool]
{
border:5px solid green;
}
多值选择
[title~=hello] { color:blue; }
写到最后发现原来w3c给出了总结
http://www.w3cschool.cc/cssref/css-selectors.html
标签：
原文地址：http://www.cnblogs.com/xzqhextt/p/4586565.html
