css入门知识:div和span,常用选择器,高级选择器
目录
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或更低版本中,不支持子选择器,可以使用通用选择器模拟子选择器的效果。使用通用选择器覆盖子元素的后代上的样式来实现
IE6模拟实现的效果(我没成功)
3.2 相邻同胞选择器 返回顶部
adjacent sibling selector可用于定位同一个父元素下某个元素之后的元素。IE6或更低版本同样不支持,所以在实际的运用中,大家更喜欢为这一个要特殊设置样式的元素重新设置样式。
3.3 属性选择器
当鼠标停留在有title属性的元素上时,大多数游览器会显示一个提示。其代码是这样的:
<abbr title="Cascading Style Sheets">CSS</abbr>
为了在鼠标不停在元素上也让知道它有额外信息,常在CSS中加上属性选择样式:
属性选择器实例
IE6模拟属性选择器效果
--------------------------------------------------------------------------------------------------------------
以下是摘自 博友 一方乐土(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元素中的这个属性值以这个值开头
1.3.5元素中的这个属性值以特定词结尾