目录
div和span: div | span
常用选择器: 类型选择器 | 后代选择器
高级选择器: 子选择器 | 相邻同胞选择器 | 属性选择器
1 div和span
1.1 div
div的最重要的作用就是用来分隔文档,不要滥用,只在没有现有元素能实现区域分隔的情况下才使用div。例如,如果使用主导航列表,那么不需要将它包围在div中。
<div id="mainNav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
完全可删除div,直接在列表上应用ID
<ul id="mainNav">
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
1.2 span
div 可以用来对块级元素分组,而span可对行内元素进行分组或标记
<h2>Where's Durstan?</h2>
<p>Published on <span class ="date">March 22nd,2005</span>
by <span calss="author">Andy Budd</span></p>
2 常用选择器
2.1 类型选择器,也叫元素选择器或简单选择器
p {color: black;}
a {text-decoration: underline;}
h2 {font-weight: bold;}
2.2 后代选择器
li a {text-decoration: underline;}
它表示只对列表中的锚起作用。
3 高级选择器 返回顶部
3.1 子选择器
子选择器的一个小例子代码片断
#nav > li { list-style-type: none; padding-left:1.5em;background:url(folder.png)no-repeat left top;}
<ul id="nav">
<li>Home</li>
<li>Services
<ul>
<li>Design</li>
<li>Development</li>
</ul>
</li>
<li>Contact Us </li>
</ul>
效果如下:
注意:在IE6或更低版本中,不支持子选择器,可以使用通用选择器模拟子选择器的效果。使用通用选择器覆盖子元素的后代上的样式来实现
IE6模拟实现的效果(我没成功)
#nav li {background:url(folder.png)no-repeat left top;}
#nav li {background:none;}
3.2 相邻同胞选择器 返回顶部
adjacent sibling selector可用于定位同一个父元素下某个元素之后的元素。IE6或更低版本同样不支持,所以在实际的运用中,大家更喜欢为这一个要特殊设置样式的元素重新设置样式。
3.3 属性选择器
当鼠标停留在有title属性的元素上时,大多数游览器会显示一个提示。其代码是这样的:
<abbr title="Cascading Style Sheets">CSS</abbr>
为了在鼠标不停在元素上也让知道它有额外信息,常在CSS中加上属性选择样式:
属性选择器实例
abbr[title]{
/*abbr与[]之间不能有空隔*/
/*<abbr> 标签 表示它所包含的文本是一个更长的单词或短语的缩写形式*/
border-bottom: 1px dotted red;
}
abbr[title]:hover {cursor:help;}
IE6模拟属性选择器效果
.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元素中的这个属性值等于特定值
a[rel="abc"]
{
background-color:#ccc;
padding-left:20px;
}
<a href="http://www.cnblogs.com/bit-sand" rel="abc">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>
cnblogs链接会有背景,而下面这个没有
1.3.3元素中的这个属性值含有这个值a[rel~="abc"]
{
background-color:#ccc;
padding-left:20px;
}
<a href="http://www.cnblogs.com/bit-sand" rel="I am abc !">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.4元素中的这个属性值以这个值开头
a[rel^="abc"]
{
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元素中的这个属性值以特定词结尾
a[href$="bit-sand"]
{
background-color:#ccc;
padding-left:20px;
}
<a href="http://www.cnblogs.com/bit-sand" rel="I am bit-sand">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>