美文网首页
CSS 学习四(派生选择器)

CSS 学习四(派生选择器)

作者: MrSYLong | 来源:发表于2017-03-01 23:11 被阅读180次

一、派生选择器
通过依据元素在其位置的上下文关系来定义样式的选择器,在 CSS1 中被称为上下文选择器 (contextual selectors),在 CSS2 中,它们称为派生选择器。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

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

注意标记为<strong><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>

相关文章

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • CSS基础语法(一)

    Css基础派生选择器

  • CSS 学习四(派生选择器)

    一、派生选择器通过依据元素在其位置的上下文关系来定义样式的选择器,在 CSS1 中被称为上下文选择器 (conte...

  • ccs(一)

    css选择器 派生选择器 Id选择器 类选择器 属性选择器 css3背景 background-size规定背景图...

  • css的样式,选择器和框模型

    css选择器 派生选择器:li strong {color:red;}id 选择器:#red {color:red...

  • CSS学习笔记2016/6/11

    1. CSS基础语法和高级语法。 2. CSS派生选择器:派生选择器允许你根据文档的上下文关系来确定某个标签的样式...

  • CSS选择器和基础属性

    css复杂选择器 父子选择器(派生选择器)我们来看下面的结构 111 222 333 此时...

  • CSS 选择器

    css选择器大致分类 基本选择器:元素选择器,群组选择器, id选择器、class选择器 派生选择器:后代元素选择...

  • 任务8-CSS选择器

    1.CSS选择器常见的有几种? id选择器: 类选择器: 属性选择器: 分组选择器: 派生选择器: 标签选择器: ...

  • 2. css 选择器 & 样式权重

    日期: 2020-10-03 1. CSS 选择器分类 通配符 *标签选择器类、伪类选择器id 选择器派生选择器...

网友评论

      本文标题:CSS 学习四(派生选择器)

      本文链接:https://www.haomeiwen.com/subject/alocgttx.html