样式选择器

 

标签选择器：整体控制

h1 {  
    font-family:Verdana, Geneva, sans-serif;  
    color:#006;  
    margin-bottom:0; 
}

　　直接控制网页上的各个标签，无需指定哪个样式。

 

类选择器：精确控制

　　标签控制网页整体，类选择器用于控制网页的各个细节，标签指定了类选择器就不受到标签选择器的控制了。

.special {  
    color:FF0000;  
    font-family:Arial, Helvetica, sans-serif; 
}

1, 类标签必须以一个圆点开头。
2, CSS 只允许类名称使用字母，数字，连字号（-）和下划线（-）。
3, 圆点好，只允许字母开头。
4, 类名称是区分大小写的。

<p class="special">  <!-- class 选择类样式，无需加圆点 -->

　　可以使用<span>标签用于应用于段落里的某个部分或标题。

 

ID选择器：控制特殊的网页元素

　　ID选择器用来识别网页特殊部分，横幅，导航栏，或主要内容区。它和类选择器的区别在于，ID选择器对基于javaScript，或非常冗长的网页有特殊的用途。不然，就没必要使用它了。

　　要在一张网页上多次使用某一种样式时，必须使用类选择器  用ID选择器来识别每张网页上只出现一次的部分。 考虑ID选择器来避免样式冲突，Web浏览器给了ID选择器更高的优先权，高于类选择器。

#banner {    /* 必须 # 开头 */  
    background:#CC0000;  
    height:300px; 
     width:720px; 
}

<p id="banner"> <!-- id选择ID样式 -->

 

构建群选择器

　　有时候，需要同一样式应用于几个不同元素的方法。

h1,h2,h3,h3,h4 {  
    color:#000; 
}  

　　群选择器中可以使用任何一种有效的选择器。

h1,p,.copyright,#banner {  
    color:#000; 
}

 

通用选择器    

　　通用选择器可以给几个不同的网页元素应用相同的样式属性。

*  {        /* 应用于网页每一个标签 */  
    font-weight:bold; 
}

　　也可作为派生选择器的一部分，例如 #banner* 会选择ID为#banner的网页元素内的每一个标签。

派生选择器

 HTML族谱    HTML 由嵌套标签组成，它们之间互相嵌套形成一个族谱    

　　

　　祖先标签，一个标签包含另个标签时，这个标签便是相对于下面的标签的祖先标签.
　　派生标签，处在一个或多个标签内的标签，便是派生标签，例：title是head与html的派生标签。
　　父标签，head是title与link的父标签，p是strong的父标签。

h1 strong {   /* 只有当strong标签出现在h1表现内才改变颜色 ，而网页上其他strong标签不受影响*/  
    color:red; 
}

p.intro a {  /* p与.intro没有空格，p标签必须应用了.intro类样式后,这样式才生效，a标签才改变颜色为黄色(<p class="intro">)*/  
    color:yellow; 
}

p .intro a {  /* p与.intro有空格,p标签下的派生标签，应用了.intro类，这些标签下的a标签才生效 */  
    color:yellow; 
}