5、CSS 派生选择器

派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

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

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {font-style: italic;font-weight: normal;}

请注意 <li><strong> 的上下文关系：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p><ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

再看看下面的 CSS 规则：

strong {color: red;}h2 {color: red;}h2 strong {color: blue;}

下面是它施加影响的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

5、CSS 派生选择器相关推荐

css class选择器用法,CSS类选择器用法简明介绍
你对CSS类选择器的使用是否熟悉,这里向大家描述一下,在CSS中,CSS类选择器通常以一个点号显示,需要注意一点的就是不要使用数字起始类名!因为它无法在Mozilla或Firefox中起作用. CSS ...
CSS——基础选择器
CSS的基础选择器 1 CSS指的是层叠样式表 2 CSS规则由两个主要的部分构成选择器,以及一条或多条声明 3 选择器通常是你需要改变样式的 HTML 元素如h1 4 每条声明由一 ...
前端笔记（3）css，选择器，文字文本属性，外观属性
CSS样式表(1) (1)css概念引入css的三种方法行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (2)css选择器 css基础选择器标签选择器类选择器 id选择器 ...
CSS继承选择器与包含选择器的比较
作者:sagahu@163.com 日期:2011-12-21 CSS继承选择器与包含选择器的作用很像,其类似点主要有: 继承选择器的子孙元素可以继承到祖先元素的某些样式:而包含选择器的子元素可以得到 ...
css元素捕捉,css元素选择器
CSS 元素选择器最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p.h1.em.a,甚至可以是 ...
【CSS】选择器优先级
CSS的选择器优先级的权重在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器如#header b: class选择器如 ...
html的选择器child,css child选择器妙用
css child选择器妙用:倒数第n,奇数列,偶数列,倍数列,第n个到最后,第一个到n 1.first-child first-child表示选择列表中的第一个标签. 2.last-child la ...
html 并集选择器,CSS并集选择器
CSS并集选择器也叫群选择器,是由多个选择器通过逗号连接在一起的,这些选择器分别是:标签选择器.类选择器或id选择器等. 在声明各种CSS选择器时,如果某些选择器的风格完全相同,或者部分相同,便可以利 ...
教你玩转CSS 属性选择器
目录具有特定属性的HTML元素样式属性选择器属性和值选择器属性和值的选择器 - 多值表单样式 CSS 属性选择器具有特定属性的HTML元素样式具有特定属性的HTML元素样式不仅仅是cl ...

5、CSS 派生选择器

派生选择器

5、CSS 派生选择器相关推荐

最新文章

热门文章