- 浏览: 2643 次
- 性别:
- 来自: 四川
最新评论
文章列表
CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
简单属性选择
如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。
例子 1
如果您希望把包含标题(title)的 ...
ID 选择器允许以一种独立于文档元素的方式来指定样式。
CSS ID 选择器
在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。
语法
首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看下面的规则:
*#intro {font-weight:bold;}
与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:
#intro {font-weight:bold;}
这个选择器的效果将是一样的。
第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。
以下是一个实际 ID 选择器的例子 ...
类选择器允许以一种独立于文档元素的方式来指定样式。
CSS 类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用,也可以与其他元素结合使用。
提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。
修改 HTML 代码
在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。
为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。请看下面的 HTML 代码:
<h1 class="import ...
选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明:
h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式(color:gray;)将应用到这两个选择器所引用的元素。逗号告诉浏览器,规则中包含两个不同的选择器。如果没有这个逗号,那么规则的含义将完全不同。参见后代选择器。
可以将任意多个选择器分组在一起,对此没有任何限制。
例如,如果您想把很多元素显示为灰色,可以使用类似如下的规则:
body, h2, p, table, th, td, pre, strong, em { ...
CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
亲自试一试
可以将某个样式从一个元素切换到另一个元素。
假设您决定将上面的段落文本(而不是 h1 元素)设置为灰色。只需要把 h1 选择器改为 p:
html {color:black;}
p {color:gray;}
h2 {color: ...