CSS学习<2>

一、CSS派生选择器

作用：通过根据元素在上下文之间的关系来定义样式，可以是标记更加简洁。

派生选择器的英文名称是contextual selectors（直译是上下文选择器）。

在CSS1中依据这种规则的选择器称为上下文选择器（contextual selectors），在CSS2中称为派生选择器。

派生选择器允许你根据上下文之间关系来确定某个标签的样式。通过合理使用派生选择器，可以使HTML代码更加简洁。

重要提示：

派生，顾名思义就是在原本元素的默认样式下在派生出一个其他样式。

比如下面代码中的strong元素，其原本定义为粗体字，通过使用派生给其不一样的定义。

CSS代码：下面的派生影响<li>标签下的<strong>标签内的内容样式

li strong {

font-style : italic; /*此处为斜体字*/

font-weight : normal;

}

HTML代码：

<p><strong>此处内容为strong的默认粗体</strong></p>

<ol>

<li><strong>此处内容为CSS派生出的特殊定义字体：斜体字</strong></li>

<li>系统默认的正常字体</li>

</ol>

二、CSS id选择器

作用：为标有特定id的HTML元素指定特定的样式。

在CSS中id选择器以“#”来定义。

顾名思义id选择器和id属性密切相关，确切的说是必须和id匹配。当然衍生出的派生id选择器即另当别论。

如下：

CSS代码：

#red {

color : red;

}

HTML代码:

<p id = "red">id属性值就是CSS所指定的特定样式：红色</p>

注意：id属性在每个HTML文档中只能出现一次。

2.1、id选择器衍生处的派生选择器

作用范围：只作用在id属性所对应的标签中的衍生元素内的内容。

如下代码所示：作用域为test属性所对应标签中的<p>标签内的内容。

CSS衍生选择器代码：

# test p {

color : red;

}

HTML代码：(标题中插入段落，不标准，仅供测试)

<h id = "test">你好<p>此处区域显示红色</p></h>

<h id = "test">此处区域不会显示红色</h>

三、CSS类选择器

在CSS中，类选择器以一个点号显示。HTML中类选择器要匹配class属性。

如下：.center {text-align : center;}

HTML代码:

<h class = "center">此处标题的内容居中</h>

<p class = "center">此处内容也居中</p>

3.1、类选择器衍生的派生选择器

其使用方法和id的衍生的派生使用方法雷同

3.2、元素也可基于他们的类而被选择（也可理解为基于特定标签的类选择器）

如下CSS代码:

td.fancy {

color : red;

}

此CSS代码指明类选择器fancy只是针对于<td>标签。

四、CSS属性选择器

对带有指定属性的HTML元素设置样式。不仅限于class 和 id属性，同时chass和id属性为特别的选择器。

注释：只有在规定了<!DOCTYPE>时，IE7以后的浏览器才支持属性选择器；在IE6以下（包括IE6）浏览器中不支持属性选择。

4.1、简单属性选择器

如下：为带有title属性的所有HTML元素设置样式。

CSS代码:

[title]{

color : red;

}

HTML代码：

<h1 title = "hello">此处内容字体为红色</h1>

<p title = "hi">此处内容字体也为红色</p>

<p>此处内容为正常字体颜色</p>

4.2、属性和值选择器（属性对应单一值）

以属性和值此对为依据，只要有包含此对的HTML元素都可以设置样式。

如下：

[title=hello]{

color : red;

}

HTML代码：

<h1 title = "hello">此处内容字体设置为红色</h1>

<p title = "hello">此处内容字体也为红色</p>

<p title = "hi">此处内容字体为正常字体颜色</p>

4.3、属性对应多个值选择器

比如：[title~=hello] 表示：属性为title值只要包含单独的的hello。只要拥有此对的HTML元素就可设置样式。

注意：hello必须是单独词，属于一个单词的一部分是不合法的。

[title~=hello]{

color : red;

}

HTML代码：

<h1 title = "hello world">此处内容字体为红色</h1>

<p title = "say hello">此处内容字体为红色</p>

<p title = "sayhello">此处内容为正常的字体颜色</p>