css入门知识:div和span,常用选择器,高级选择器

目录
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.0以下版本不支持属性选择器,用一种更聪明的方法使用属性选择器。可以对IE应用一种样式，而对能识别属性选 择器的游览器应用另一种样式。例如：IE在显示1像素的点边界有问题，所以可将点边界显示为虚线，而通过属性选择器将点边界只应用于能够正确表现它的游览 器，这就需要寻找class属性而不是使用类选择器。

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> 这个东西在链接上面比较有用，可以分辨出来这个链接中转向哪里的，设置不同的属性，可IE6不支持！现在有点越来越看不起IE6了，~~~

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> 这个东东也非常有用，在用户体验上面，如果下载的文件是doc格式的，或者pdf格式的，我们就可以根据不同的格式设置不同的样式，用户感觉是不是非常好呀？可IE6仍然不支持。

 

 

 

来源：https://www.cnblogs.com/tograce/archive/2008/10/01/1302693.html