[JavaScript知识库]【前端学习之HTML&CSS】-- CSS第九篇 -- 多种多样的选择器

【前端学习之HTML&CSS】-- CSS第九篇 – 多种多样的选择器

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。

在CSS的学习过程中，我们已经学习过了基本的选择器和并列、联合的知识，这届博客的主要内容在于补充一些较为常用的伪类选择器和伪元素选择器，并给出一些实例。【基本选择器链接：选择器】

一、伪类选择器

1. first-child：

• 作用：选中第一个子元素(常需与其他选择器配合)

    li:first-child{
        /* 选中li元素，且li元素必须是第一个子元素 */
        color: blueviolet;
    }

    <div>
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Repellat, excepturi. Officiis, ipsam animi!</li>
            <li>Consectetur possimus maiores eum? Nam.</li>
            <li>Porro cupiditate iure doloremque vitae!</li>
            <li>Non error quas et impedit?</li>
        </ul>
    </div>

2. first-of-type：

• 作用：选择子元素中第一个满足类型的元素

    li:first-child{
        color: blueviolet;
    }
    /* 此时第一个选择器无用 */
    li:first-of-type{
        /* 选中第一个li子元素 */
        color: brown;
    }

    <div>
        <ul>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Repellat, excepturi. Officiis, ipsam animi!</li>
            <li>Consectetur possimus maiores eum? Nam.</li>
            <li>Porro cupiditate iure doloremque vitae!</li>
            <li>Non error quas et impedit?</li>
        </ul>
    </div>

3. last-child/last-of-type：

• 作用：选中最后一个子元素(常需与其他选择器配合)
• 用法：与first相反，略

4. nth-child：

• 作用：选中指定第几个位置的子元素

    /* 选中子元素中排行第五的li元素 */
    li:nth-child(5){
        color: burlywood;
    }

    <div>
        <ul>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Repellat, excepturi. Officiis, ipsam animi!</li>
            <li>Consectetur possimus maiores eum? Nam.</li>
            <li>Porro cupiditate iure doloremque vitae!</li>
            <li>Non error quas et impedit?</li>
        </ul>
    </div>

• 扩展：选中特定序列的子元素(下图为偶数子元素)

    /* 选中子元素排行偶数的li元素,也可以用even，奇数可以用odd */
    li:nth-child(2n){
        color: darkgreen;
    }

5. nth-of-type：

• 作用：选中指定第几个位置且满足类型的子元素

    /* 选中子元素中第五个li元素 */
    li:nth-of-type(5){
        color: darkblue;
    }

    <div>
        <ul>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Repellat, excepturi. Officiis, ipsam animi!</li>
            <li>Consectetur possimus maiores eum? Nam.</li>
            <li>Porro cupiditate iure doloremque vitae!</li>
            <li>Non error quas et impedit?</li>
        </ul>
    </div>

二、伪元素选择器

1. first-letter：

• 作用：首字母/文字选择器
  

    .fl::first-letter{
        color: bisque;
        font-size: 2em;
        font-weight: bold;
    }

    <div>
        <p class="fl">
            这里用来测试首汉字样式选择
        </p>
    </div>

2. first-line：

• 作用：首行选择器

    .fline::first-line{
        color: blueviolet;
    }

    <div>
        <p class="fline">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem nihil quis unde praesentium labore ipsam sit voluptate necessitatibus. Facilis amet ipsum ipsam itaque! Repellat debitis eaque assumenda, consectetur architecto enim impedit iusto voluptatum deleniti maxime libero est quis asperiores aliquid fugiat unde quasi suscipit excepturi sapiente fugit laborum laudantium possimus! Dolores doloribus blanditiis nemo. Rerum ab rem officia animi. Laudantium consequuntur amet recusandae iste nisi vitae officia rerum sint molestiae? Delectus nam libero veritatis tenetur minima, ipsa fugit rem dolor repudiandae laboriosam, sit obcaecati accusamus consectetur. Accusamus, ea quibusdam natus ducimus asperiores commodi sequi dolorem, quis dignissimos optio voluptatibus nam.</p>
    </div>

3. selection：

• 作用：选中被用户框选的文字

    p::selection{
        background-color: blueviolet;
        color: aquamarine;
    }

总结

本文主要补充了一些伪类选择器和伪元素选择器，这些选择器大多都是负责选择指定位置的选择器，在样式种类愈发复杂的情况下，掌握更多的选择器毫无疑问可以让我们更加方便的设置样式，书写更少的类选择器，防止取名冲突。