CSS选择器二

CSS选择器（二）

• 二、五种派生选择器

  • 1、后代选择器

  • 2、子元素选择器

  • 3、相邻兄弟选择器

  • 4、伪类选择器

  • 5、伪元素选择器

  

二、五种派生选择器

派生选择器与五种基本选择器的一大区别是，派生选择器是通过依据元素在其位置的上下文关系来定义样式。这里称其为派生选择器是依循了CSS2中的叫法。在CSS1中，这种选择器被称为上下文选择器。这两种叫法都是指向那些依据上下文关系来定义样式的选择器。本文接下来统一称呼为派生选择器。

而且很多时候我们都可以通过与普通家族关系类比来更好地理解这些上下文关系。

  

1、后代选择器

后代选择器（descendant selector）又称为包含选择器，可以选择作为某元素后代的元素。

后代选择器其实描述的是一种祖先结构。我们使用标签选择器时只需要把具有后代关系的标签名，类名或者id等按照后代关系排列，并且两两之间用空格隔开，最后的那个后代就是我们最终选择的到的后代。

两两标签之间不一定后代关系就是紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。

HTML部分

    <div class="d1">
        <p>句子1</p><br>
        <p>句子2 <i>句子3</i> </p>
    </div>

CSS部分

    <style>
        .d1 p i{  color: red }
    </style>

    <!-- 也可以这么写 -->
        <style>
        .d1  i{  color: red }
    </style>

通过后代选择器，我们选中了类名为d1的div下的p标签内的i标签，并实现了字体颜色变为红色。

而且有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。也就是说我们列出来的祖先结构中的两两之间可以间隔无限个层次。

比如我们想选择ul内的所有em元素，那么不管还有多少元素，我们只需列出ul em{ }即可选择到在ul内的所有em元素。

  

2、子元素选择器

子元素选择器，顾名思义就是选择某一个元素的子元素。与后代选择器相比，子元素选择器只能选择作为某元素的子元素的元素。可以说，子元素选择器就是把后代选择器的精度提高。

不过子元素选择器与后代选择器还是有所不同，，子元素选择器只能选择某元素的直接后代，不能跨代选取。

比如我们希望把h1标签中的所有直接子p元素都变成红色字体，那么我们可以这样写

HTML部分

    <h1>
        <p>我是段落p</p>
        <p>我是段落p</p>
    </h1>
    <h1>
        <p>我是段落p</p>
        <p>我是段落p</p>
        <em><p>我是段落p</p></em>
    </h1>

CSS部分

    <style>
        /* 子结合符两边可以有空白符，这是可选的 */
        /* 设置h1的儿子p字体颜色变为红色 */
    h1>p{
        color: red
    }
    </style>

这里我们可以看到，除了最后一个p元素之外其他段落p都变成了红色。这是因为最后一个p元素是在em标签内的，它就不是h1的“儿子”了，而是h1的“孙子”，子代选择器就选择不到em内的p了。

在这里你也应该注意到了，这里我们使用的是大于号>(子结合符)来连接父元素和子元素。h1>p我们也可以解释为“选择作为 h1 元素子元素的所有 p 元素”

因此注意区分子代关系是我们使用子代选择器需要注意的一点。

  

3、相邻兄弟选择器

首先我们可以来解释一下关于“相邻兄弟”中的“兄弟”的意思。这里的兄弟我们也可以切入家族关系中来理解。我们一般有堂兄弟，表兄弟和亲兄弟。亲兄弟指的是拥有同一个父亲的兄弟。相邻兄弟选择器的兄弟关系就类似与亲兄弟的关系。即拥有相同的父元素的平行子元素。

注意它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在后面的兄弟元素。

比如我们为跟在h1后面的第一个p元素添加字体颜色变为红色的样式

HTML部分

    <h1>我是h1</h1>
    <p>我是p</p>
    <p>我是p</p>
    <h1>我是h1</h1>
    <p>我是p</p>
    <p>我是p</p>

CSS部分

    <style>
    /* 设置h1的相邻兄弟p字体颜色变为红色 */
        h1+p{
            color: red
        }
    </style>

可以看到，尽管所有的p元素与h1元素都是兄弟关系，不过却也只有两个p元素变成了红色。这是因为我们选择的是相邻的兄弟元素。

这里我们使用的是相邻兄弟选择符（+）。同样选择符两边有无空格不影响。上面的选择器我们可以解释为“选择紧接在 h1 元素后出现的段落p，h1 和 p 元素拥有共同的父元素”。

  

4、伪类选择器

首先我们来解释一下什么是伪类。伪类是用单冒号来表示的，比如:hover,:visited等。CSS伪类用来添加一些选择器的特殊效果。现在我们可以暂且理解为某元素满足某状态或某条件后显示的样式。

比如对a标签，我们可以为其添加当链接被访问后，a标签字体样式变为红色，我们可以这么写

HTML部分

    <a href="https://www.baidu.com">百度</a>

CSS部分

    <style>
        /* 被访问后字体颜色变为红色 */
        a:visited{
            color: red
        }
    </style>

这样设置后，刚开始打开时a元素还是默认样式蓝色，不过当我们访问一次该链接之后，a元素就变为了红色，就算我们再次刷新页面也还是红色。这是因为在a元素被访问之后浏览器留下了记忆，该链接已经被访问过了。这时满足了我们的":visited"伪类，伪类选择器发挥作用把a元素字体样式变为了红色。

下面我们来了解一下其他伪类的属性及描述。

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:last-child	选中列表中的最后一个元素
:nth-child()	从第一个元素开始计算的第几个元素
:nth-last-child()	从最后一个元素开始计算的第几个元素
:lang	向带有指定 lang 属性的元素添加样式。
:not()	选择非某元素的其他元素

:nth-child()和:nth-last-child()的括号中除了可以填入数字之外，还可以填入自变量为n的表达式，如3n即选择第三个，第六个……，还有odd（偶数）和even（基数）

  

5、伪元素选择器

伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after。用法也和伪类一样。伪元素其实我们可以理解为创建了一个虚假的元素，插入在指定元素的相对的某位置。

我们就拿::first-letter伪元素来介绍一下我们伪元素写法。

::first-letter伪元素用于向文本的首字母设置特殊样式。

HTML部分

<p>Thirty-two people have died and 16 more are missing after Typhoon Lekima made landfall in east China's Zhejiang Province, according to China's state-run Xinhua news agency.</p>
<p>Most of the victims were killed when torrential downpours caused a landslide in Yongjia County, which in turn blocked a river, before victims were swept away.</p>
<p>Xinhua reported that close to 5 million people living in the Zhejiang province were hit by the floods. Over 1 million were evacuated, according to provincial flood control headquarters.</p>
<p>文章来自CNN</p>

CSS部分

    <style>
        p::first-letter{
            /* 设置字体颜色为红色 */
            color: red
        }
    </style>

这里每个p元素的首字都变成了红色。这就是伪元素的作用效果。

下面我们来看一下其他伪元素的属性和描述

属性	描述
::first-letter	向文本的第一个字母添加特殊样式。
::first-line	向文本的首行添加特殊样式。
::before	在元素之前添加内容。
::after	在元素之后添加内容。

我们需要注意一下，::first-letter和::first-line伪元素可用的属性是有一点限制的。

下面的属性可应用于 “first-line” 伪元素：

• font
• color
• background
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

下面的属性可应用于 “first-letter” 伪元素：

• font
• color
• background
• margin
• padding
• border
• text-decoration
• vertical-align (仅当 float 为 none 时)
• text-transform
• line-height
• float
• clear