CSS学习总结4:派生选择器学习总结

时间:2022-05-23 23:24:33

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

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 元素的子元素。