选择器

后代选择器
#nav li {...}


子选择器
后代选择器选择一个元素的所有后代，子选择器只选择元素的直接后代，即子元素。
#nav>li {background:url(folder.png);}
<ul id="nav">
  <li>home</li>
  <li>sss
    <ul>
      <li>design1</li>
      <li>design2</li>
      <li>design3</li>
   </ul>
  </li>
  <li>dsfsf</li>
</ul>


相邻同胞选择器
用于定位同一个父元素下某个元素之后的元素。
h1 + p {font-weight:bold;}

<h1>标题</h1>
<p>1111</p>
<p>2222</p>


属性选择器
1.根据某个元素是否存在对元素应用样式
<abbr title="...">CSS</abbr>

abbr[title]{...}
abbr[title]:hover{...}

2.根据属性值应用样式
a[rel="nofollow"]{...}
.intro{...}
[class="intro"]{...}

3.根据属性值之一寻找元素
a［rel~="friend"］{...}
<a href="#" rel="friend css ...">css</a>


/*IE6和更低的版本不支持属性选择器，可以通过在每个元素中添加类，使用javascript和DOM实现相似的效果。
http://tinyurl.com/dmao4http://tinyurl.com/dmao4
*/
突出显示不同类型的链接
1.使用［att^="val"］属性选择器寻找以文本http:开头的所有链接
a[href^="http:"]{background:url(images/externalLink.gif) no-repeat right top; padding-right:10px;}    /*CSS3*/

这应该会突出显示所有外部链接，但是，它也会选中使用绝对URL而不是相对URL的内部链接。所以需要重新设置指向自己站点的所有链接。
a[href^="http://www.yoursite.com"],a[href^="http://yoursite.com"]{background:none;padding-right:0;}    /*CSS3*/

2.对邮件链接也进行突出显示
a[href^="mailto:"]{...}

3.突出显示非标准的协议
a[href^="aim:"]{...}
<a href="aim:goim?screenname=andybudd">instant message</a>

突出显示可下载的文档和提要
使用［att$="val"］属性选择嚣，它寻找以特定值（比如：.pdf或.doc）结尾的属性。
a［href$=".pdf"］{background:url(images/pdfLink.gif) no-repeat right top; padding-right:10px;}
a[href$=".doc"]{background:url(images/wordLink.gif) no-repeat right top; padding-right:10px;}

用自己的RSS图标突出显示RSS提要：
a［href$=".rss"］,a[href$=".rdf"]background:url(images/feedLink.gif) no-repeat right top; padding-right:10px;}

纯CSS工具提示
<p>
  <a href="#" class="tooltip">CSS<span>css css</span>dsfdsfdesf</a>
</p>

a.tooltip{position:relative;}
a.tooltip span{display:none;}
a.tooltip:hover span{
display:block; position:absolute; top:1em; left:2em; padding:0.2em 0.6em; border:1px solid #ccc; background-color:#eee; color:#000;
font-size:100%;  /*IE bug*/
}