派生选择器:通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。派生选择器中一共分为三种:后代选择器、子元素选择器、相邻兄弟选择器。

1、初识派生选择器

实例:你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

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

请注意标记为 <strong> 的蓝色代码的上下文关系:


<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</p></strong>
<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>

2、后代选择器

后代选择器又称包含选择器,可以选择作为某元素后代的元素。后代选择器的功能是:根据上下文选择元素。我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

实例:如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:

<h1>This is a <em>important</em> heading</h1>/*变成红色*/
<p>This is a <em>important</em> paragraph.</p>/*不变色*/

上面的例子可以这样解释:“作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器,可以换成以下说法:“包含 em 的所有 h1 会把以下样式应用到该 em”。

特别注意:后代选择器有一个极其容易被忽略的地方,即两个元素之间的层次间隔可以使无限的。

例如:如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。

因此,ul em 将会选择以下标记中的所有 em 元素:

<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

3、子元素选择器

与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素。

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器。

实例:如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:

<h1>This is <strong>very</strong> <strong>very</strong> important</h1>
<h1>This is <em>really <strong>very</strong></em>important</h1>

子选择器使用了大于号(子结合符)。子结合符两边可以有空白符,这是可选的。因此,以下写法都没有问题:

h1 > strong
h1> strong
h1 >strong
h1>strong

如果从右向左读,选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

结合后代选择器和子选择器:

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。

4、相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

实例:如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px;}

相邻兄弟选择器使用了加号(+),即相邻兄弟结合符。与子结合符一样,相邻兄弟结合符旁边可以有空白符。

<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>

在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。

请看下面的选择器:

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变成粗体。第一个列表项不受影响。

<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>

结合其他选择器:

相邻兄弟选择器还可以结合其他结合符:

html > body table + ul {margin-top:20px;}

这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

CSS学习总结4:派生选择器学习总结的更多相关文章

  1. 学习总结:CSS(一)定义方式、选择器、选择器权重

    一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...

  2. 记录:CSS选择器学习

    常用选择器:标签选择器.类选择器.ID选择器 子选择器(Child selectors) 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素. .con> ...

  3. CSS 派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...

  4. (四)CSS选择器和派生选择器

    CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式.在学习派生之前,先来了解基本的CSS选择器.前面的文章中提到过下图,选择器的位置如下所示: CSS选择器 分为几种基本选择器:元素选择器 ...

  5. jQuery学习之旅 Item1 选择器【一】

    点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择I ...

  6. css知多少(2)——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  7. jQuery中的基本的选择器学习(补充版)

    先看整体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  8. jQuery学习笔记——jQuery常规选择器

    一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery ...

  9. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

随机推荐

  1. 浅谈JS的数组遍历方法

    用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; ...

  2. Http协议基础及发展历史

    一.网络分层协议 经典五层模型 1.物理层:(电脑的硬件,网卡端口,网线,网线连出去的光缆) 定义物理设备如何传输数据 2.数据链路层 在通信的实体间建立数据链路连接. 两台机器物理上是可以连接在一起 ...

  3. 记录一个Q版openstack搭建教程地址

    https://blog.csdn.net/networken/article/details/80682437 感谢这篇文章的作者,文档很详细,记录一下,希望对大家有帮助.

  4. linux-linnode满了的提示

    线上有一台web服务器磁盘检测告警了,提示空间不足,登到服务器查看 <ignore_js_op> touch:cannot touch `furm.html': No space left ...

  5. 关于set_input_delay的用法分析

    关于set_input_delay的用法分析 数据分为了系统同步和源同步: 对于下降沿采集数据的情况,当下降沿时钟延迟dv_afe到达无效数据最左端时,图中1位置,为最小延时,即采集不到有效数据的临界 ...

  6. 2、php中字符串单引号好和双引号的区别

    使用单引号和双引号的主要区别是:单引号定义的字符串中出现的变量和转义序列不会被变量的值代替,而双引号中使用变量名会显示该变量的值.

  7. 简述Ajax原理及实现步骤

    简述Ajax原理及实现步骤 1.Ajax简介 概念 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML). 现在允许浏览器与务器通信 ...

  8. reids高可用(灾难备份-持久化)

    java缓存存放到内存之中,当服务器重启以后,内存的数据将丢失,而reids作为缓存,重启reids以后 数据是不是也会丢失,redis服务器重启以后数据也不会丢失,这个是redis提供了持久化的功能 ...

  9. WPF Binding Mode,UpdateSourceTrigger

    WPF 绑定模式(mode) 枚举值有5个1:OneWay(源变就更新目标属性)2:TwoWay(源变就更新目标并且目标变就更新源)3:OneTime(只根据源来设置目标,以后都不会变)4:OneWa ...

  10. linux如何复制文件夹和移动文件夹

    linux下文件的复制.移动与删除命令为:cp,mv,rm一.文件复制命令cp 命令格式:cp [-adfilprsu] 源文件(source) 目标文件(destination)cp [option ...