【前端学习之HTML&CSS】-- CSS第三篇 – 选择器（上）

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章将进入对于选择器的学习，选择器是帮助我们实现不同元素不同内容丰富多彩的样式的关键，我们这里主要介绍了ID选择器、元素选择器、类选择器、通配符选择器、属性选择器、伪类选择器和伪元素选择器，不同种类的选择器用法不同，只有充分的掌握了选择器的使用才能实现CSS的巧妙书写。

选择器

选择器的作用：帮助我们精准的选中想要的元素；

简单选择器

1. ID选择器

用法：# + ID名称，就可以选择对应ID值的元素；

    /* ID选择器,CSS中# + ID名称选择 */
    #test01 {
        color: blueviolet;
    }

    <!-- ID选择器 -->
    <p id="test01">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

2. 元素选择器

用法：输入元素名称，就可以选择对应元素；可以选择到页面上所有的同名元素

    /* 此时的CSS会选中所有的P元素 */
    p{
        color: aquamarine;
        background-color: lightcoral;
        text-align: left;
    }

3. 类选择器 .

用法：需要在元素中添加class属性对应，通过. + class名称对应，一个元素可以同时选择多个类；

    /* 类选择器 */
    .c1 {
        color: goldenrod;
        background-color: darkblue;
    }
    .big-center {
            font-size: 3em;
            text-align: center;
    }

    <p class="c1 big-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

4. 通配符选择器 *

用法：*，选中所有元素(无所谓类型)

    <style>
        * {
            color: #008c8c;
        }
    </style>

5. 属性选择器 []

用法：根据属性名和属性值选中元素，[属性] + {};
该选择器的用法很多，具体可以通过百度：属性选择器 MDN搜索得到；

    /* 属性选择器 */
    /* 选中所有具有href属性的元素 */
    [href] {
        color: blueviolet;
    }
    /* 选中属性值特定的元素 */
    [href="https://www.qq.com/"]{
        color: chocolate;
    }
    /* 选中包含某个属性值的元素,实际上类似于类选择器 */
    [class~="b"] {
        color: crimson;
    }
    /* 可以将~换为*，则即使class中各属性值间没有空格间隔，也可以选中 */
    [class*="b"] {
        color: crimson;
    }
    /* $= ,表示的含义是属性值末尾是。。。 */
    [href$="hao123.com/"] {
        background-color: aqua;
    }

    <!-- 属性选择器 -->
    <a href="https://space.bilibili.com/123883164/favlist?fid=1498871964&ftype=create">生如昭诩的主页</a>
    <a href="http://www.hao123.com/">网址</a>
    <a href="https://www.qq.com/">腾讯</a>
    <p class="a b c d">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, dolores.</p>
    <p class="abcd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, dolores.</p>

6. 伪类选择器 :

用法：选中某些元素的某种状态，（元素）: + 特殊状态；

• hover：鼠标悬停的状态；

    /* 前面不加元素即:hover时，鼠标悬停到所有元素处都会变化样式 */
    /* 伪类选择器，鼠标悬停到a元素时变化样式 */
    a:hover {
        color: red;
    }

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <a href="https://space.bilibili.com/123883164/favlist?fid=1498871964&ftype=create">生如昭诩的主页</a>
    <a href="http://www.hao123.com/">网址</a>
    <a href="https://www.qq.com/">腾讯</a>

• active：激活状态，鼠标按下状态；

    /* active，鼠标按下 */
    a:active {
        color: #008c8c;
    }

• link：超链接未访问时的状态；
• visited：超链接访问后的状态；

    /* link: 超链接未访问时的状态 */
    a:link {
        color: chocolate;
    }
    /* visited: 超链接访问后的状态 */
    a:visited {
        color: yellow;
    }

爱恨法则LoVe、Hate

四个伪类同时使用：必须有先后顺序：link – visited – hover – active

选中第N个元素的样式

.main .container .movies .movie-item:nth-child(6n){
    /* 这里选中的是第6、12、18等元素 */
    margin-right: 0;
}

7. 伪元素选择器 ::

用法：生成并选中某个元素内部的第一个子元素或最后一个子元素，::；

before：生成一个子元素，且是第一个元素，对content增加样式
以下面为例，就是<span><before>content</before>lorem<span>

after：生成一个子元素，且是最后一个元素，对content增加样式
以下面为例，就是<span>lorem<after>content</after></span>

    /* 伪元素选择器 */
    /* before生成一个子元素，且一定是第一个元素 */
    span::before {
        content: "《";
    }
    /* after生成一个子元素，且一定是第一个元素 */
    span::after {
        content: "》";
    }

    <!-- 伪元素选择器 -->
    <p>Lorem ipsum dolor sit amet, <span>adipisicing</span> adipisicing elit. Nulla quas at nobis magni velit illo ut eum eaque eos rerum.</p>

解决高度坍塌问题

伪元素选择器可用于解决后续课程中浮动将会导致的高度坍塌，使用方法如下：

	.clearfix::after{
    /* 解决高度坍塌 */
    /* 那里高度坍塌，给他的父元素加上此属性 */
    content: "";
    display: block;
    clear: both;
}

首字母大写

伪元素选择器还可用于实现首字母的大写，方法如下：

/* 这里的main、container、movies、score均为其他的选择器 */
	.movies .movie-item .score::first-letter{
    font-size: 1.5em;
}

总结

本篇博客主要从基本的选择器类型出发，介绍了几种简单的选择器，下一篇博客中将会继续介绍选择器的排列和配合使用，在书写一个网页的CSS样式中，要尽可能细致的将选择器写的复杂一些，保证从最高层到最底层，减少出现层叠冲突。