CSS的三种选择器

今天我们讨论 CSS (Cascading Style Sheet) 的基础. 告诉你有三种 选择器. 但只介绍了其中的 HTML 选择器. 这一节我们把三种都详细介绍给你HTML 选择器、class 选择器、ID 选择器:

HTML 选择器

HTML 选择器 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定义了它们, 在整页中, 这个 Tag 的性质就按照你的定义来显示了. HTML 选择器 的语法如下：

tag {property:value}比如我们想叫 H1 的颜色是红的H1 {color: red}这里还要告诉你 CSS 的一个特点, 它可定义好几个 选择器 在一个 rule 里. 比如 H1, H2, TD {color: red}这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色.

Class 选择器

Class 选择器 有两种, 一种叫相关 class 选择器，它跟一个 HTML 的 tag 有关系。它的语法是tag.Classname {property:value}。比如我们想叫一些而不是全部 H1 的颜色是红的 H1.redone {color: red}，这样在下面的语句中, 第一个 H1 是红色的, 而第二个就不是了。

<H1 class="redone">红色的题目</H1>
<H1>普通的题目</H1>

第二种是独立class 选择器。它可被任何 HTML标签所应用. 它的语法如下：

.Classname {property:value}。

假如我们有下面这个定义：.blueone {color: blue}那么我们可以把他应用到不同的 Tag 当中去. 比如：

<H1 class="blueone">蓝色的题目</H1>
<P class="blueone">蓝色的段落</P>

显然 class 选择器 给了我们更多的自由。

ID 选择器

ID 选择器 其实跟独立 class 选择器 的功能一样。 而区别在于它们的语法和用法不同, 以及对于 Javascript 操纵HTML元素有帮助。 它的语法如下：

#IDname {property:value}

假如我们有下面的定义：

#yelowone {color: yellow}

我们可以运用这个定义到任何的有同样 ID 名字的 tag，比如：

<SPAN ID="yellowone">text here</SPAN>

你可能觉得既然 ID 选择器 和独立 class 选择器 功能一样, 为什么两者都存在呢。 如果你知道用 CSS-P 来定位的话, 你就明白它们的区别了. 有 ID 的 HTML 元素可以被 CSS-P和 JavaScript 来操纵。到现在为止, 你已经大概知道如何来写 CSS 的定义了， 下面五节我们将会告诉你如何用 CSS 来操纵或修改。

CSS兼容要点 跨浏览器的CSS固定定位

评论 (1) 1 All