13、CSS选择器.ppt

CSS选择器 青软实训 目录 派生选择器 id 选择器 类选择器 派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： 派生选择器 请注意标记为 strong 的蓝色代码的上下文关系： 在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id。 再看看下面的 CSS 规则： 下面是它施加影响的 HTML： Id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 # 来定义。 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： 下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。 注意：id 属性只能在每个 HTML 文档中出现一次。想知道原因吗，请参阅 XHTML:网站重构。 id 选择器 id 选择器和派生选择器 在现代布局中，id 选择器常常用于建立派生选择器。 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： 上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如 em/em 或者 span/span，不过这样的用法是非法的，因为不可以在内联元素 span 中嵌入 p （如果你忘记了原因，请参阅 XHTML:网站重构）。 id 选择器 一个选择器，多种用法 即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次： id 选择器 单独的选择器 id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用： 类选择器 在 CSS 中，类选择器以一个点号显示： 在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。 注意：不要使用数字起始类名！它无法在 Mozilla 或 Firefox 中起作用。 类选择器 和 id 一样，class 也可被用作派生选择器： 在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div） 元素也可以基于它们的类而被选择： 在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。 你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意，class 为 fancy 的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为 fancy 的元素也不会这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。 li strong { font-style: italic; font-weight: normal; } pstrong我是粗体字，不是斜体字/strong/p ol listrong我是斜体字。这是因为 strong 元素位于 li 元素内。/strong/li li我是正常的字体。/li /ol strong { color: red; } h2 { color: red; } h2 strong { color: blue; } pThe strongly emphasized word in this paragraph isstrongred/strong./p h2This subhead is also red./h2 h2The strongly emphasized wor