目录
div和span: div | span
常用选择器: 类型选择器 | 后代选择器
高级选择器: 子选择器 | 相邻同胞选择器 | 属性选择器
1 div和span
1.1 div
div的最重要的作用就是用来分隔文档，不要滥用，只在没有现有元素能实现区域分隔的情况下才使用div。例如，如果使用主导航列表，那么不需要将它包围在div中。
完全可删除div，直接在列表上应用ID
1.2 span
div 可以用来对块级元素分组，而span可对行内元素进行分组或标记
2 常用选择器
2.1 类型选择器,也叫元素选择器或简单选择器
2.2 后代选择器
li a {text-decoration: underline;}
它表示只对列表中的锚起作用。
3 高级选择器 返回顶部
3.1 子选择器
效果如下:
注意：在IE6或更低版本中，不支持子选择器，可以使用通用选择器模拟子选择器的效果。使用通用选择器覆盖子元素的后代上的样式来实现
#nav li {background:url(folder.png)no-repeat left top;}
#nav li {background:none;}
3.2 相邻同胞选择器
adjacent sibling selector可用于定位同一个父元素下某个元素之后的元素。IE6或更低版本同样不支持，所以在实际的运用中，大家更喜欢为这一个要特殊设置样式的元素重新设置样式。
3.3 属性选择器
abbr[title]{
/*abbr与[]之间不能有空隔*/
/*<abbr> 标签 表示它所包含的文本是一个更长的单词或短语的缩写形式*/
border-bottom: 1px dotted red;
}
abbr[title]:hover {cursor:help;}
![]()
.intro {border:1px dashed blue;}
[class="intro"]{border:1px dotted blue;}
--------------------------------------------------------------------------------------------------------------
以下是摘自 博友 一方乐土(http://www.cnblogs.com/bit-sand/) 的CSS备忘录(http://www.cnblogs.com/bit-sand/archive/2008/07/06/WebStandard_Css.html#top)
1.3属性选择器
1.3.1元素中含有某个属性
可以根据某个属性是否存在或包含一个值来寻找元素，可以实现强大的效果。属于CSS2 ，IE6或更低版本不支持。但是感觉还是有必要介绍一下
<abbr title="Cascading style Sheets">CSS</abbr>
在支持CSS 2.0的浏览器中，当鼠标放到abbr上时，会显示这个帮助提示，但是如果想让它更醒目一些，如，对具有title属性的元素应用与其他元素不同的样式，以显示出来它有提示
abbr[title] {border-bottom:1px dotted #999;}
abbr[title]:hover{cursor:help;}
在这个例子中，FF支持的比较完美，IE7一般情况下是可以的，如果abbr后面没有内容，可能下划线不会显示出来（待定，我测试的结果），IE6不支持。
1.3.2元素中的这个属性值等于特定值
cnblogs链接会有背景，而下面这个没有
1.3.3元素中的这个属性值含有这个值1.3.4元素中的这个属性值以这个值开头
background-color:#ccc;
padding-left:20px;
}
<a href="http://www.cnblogs.com/bit-sand" rel="abcsdfdsfsd !">cnblogs.com</a><br />
<a href="http://www.cnblogs.com/bit-sand" rel="I am abc!">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>
1.3.5元素中的这个属性值以特定词结尾