标签：
用来寻找特定类型的元素，一般指css中被通俗定义并广泛应用的元素，如段落、标题、正文等
<也称为元素选择器或简单选择器>
p{font-size:16px;color:black;}
用来寻找特定元素或元素组的后代，中间以空格表示
body p{font-size:14px;}
用于寻找具有指定ID的元素，由字符#表示
#intro{font-weight:bold;}
<p id="intro">Hello World!</p>
用于寻找具有指定类名的元素，由点号.表示
.date-posted{color:#ccc;}
<p class="date-posted">12/12/2012</p>
对目标元素出现某种特殊的状态应用样式
常见的有: :link,:visited(链接伪类，只能应用于锚元素)
:hover,:active,:focus(动态伪类，理论上可应用于任何元素)
a:link{color:blue;text-decoration:none;}
a:visited{color:grey;}
a:hover,:active,:focus{color:red;}
匹配所有可用元素，由*表示
*{padding:0;margin:0;}
1）子选择器
只选择元素的直接后代，即子元素，定义符号是>
body>p{color:green;}
<body>
<p>这一段是绿的</p>
<div><p>这一段不是绿的</p></div>
<p>这一段是绿的</p>
</body>
2）相邻同胞选择器（相邻选择器）
定位同一父元素下某个元素之后的元素，定义符号是+
h2+p{color:red;}
<h2>红的？</h2>
<p>是红的</p>
<p>不是红的</p>
<h2>红的？</h2>
<div><p>不是红的</p></div>
<p>不是红的</p>
<h2>红的？</h2>
不是红的
<p>红的</p>
<p>不是红的</p>
3）属性选择器
根据某个属性是否存在或属性的值来寻找元素，定义方式是将属性和值写在[]内
a[name]{color:red;} /*选中具有name属性的a元素*/
[special] /*选中具有special属性的任何元素*/
img[alt="so"][class="pic"]{margin:20px;} /*同时匹配两个属性和值*/
[special~="wo"]{color:red;}
<h2 special="wo">文字是红色的</h2> /*具有special属性且值得字符中含有wo*/
标签：
原文地址：http://www.cnblogs.com/qqcai/p/5843511.html
