css的三种selector 

上一节开始我们讨论 css (cascading style sheet) 的基础. 告诉你有三种 selector. 但只介绍了其中的 html selector. 这一节我们把三种都详细介绍给你html selector、class selector、id selector: 
 
html selector

html selector 就是 html 的 tags, 比如 p, div, td 等. 如你用 css 定义了它们, 在整页中, 这个 tag 的性质就按照你的定义来显示了. html selector 的语法如下
tag {property:value}比如我们想叫 h1 的颜色是红的h1 {color: red}这里还要告诉你 css 的一个特点, 它可定义好几个 selector 在一个 rule 里. 比如 h1, h2, td {color: red}这个定义就能让所有的 h1, h2, 和 td 的颜色都为红色. 
 
class selector

class selector 有两种, 一种叫相关 class selector, 它跟一个 html 的 tag 有关系. 它的语法是tag.classname {property:value}比如我们想叫一些而不是全部 h1 的颜色是红的 h1.redone {color: red}这样在下面的语句中, 第一个 h1 是红色的, 而第二个就不是了 <h1 class="redone">红色的题目</h1><h1>普通的题目</h1>第二种是独立 class selector . 它可被任何 html tag 所应用. 它的语法如下 .classname {property:value}假如我们有下面这个定义.blueone {color: blue}那么我们可以把他应用到不同的 tag 当中去. 比如 <h1 class="blueone">蓝色的题目</h1><p class="blueone">蓝色的段落</p>显然 class selector 给了我们更多的自由. 
 
id selector

id selector 其实跟独立 class selector 的功能一样. 而区别在于它们的语法和用法不同, 以及对于 javascript 操纵 html
元素有帮助. 它的语法如下#idname {property:value}假如我们有下面的定义#yelowone {color: yellow}我们可以运用这个定义到任何的有同样 id 名字的 tag, 比如 <span id="yellowone">text here</span>你可能觉得既然 id selector 和独立 class selector 功能一样, 为什么两者都存在呢. 如果你知道用 css-p 来定位的话, 你就明白它们的区别了. 有 id 的 html 元素可以被 css-p和 javascript 来操纵。到现在为止, 你已经大概知道如何来写 css 的定义了, 下面五节我们将会告诉你如何用 css 来操纵或修改