CSS选择器详解：用最简洁的方式实现网页样式

一、初步认识选择器

CSS选择器是指通过CSS样式表，对HTML中的元素进行定义和装饰的方法。

选择器由一些用于指定 HTML 元素的组合而成，这些组合在当前文档中找到一些特定的元素。

在CSS样式表中，常见的选择器有id选择器、class选择器和标签选择器。

    /* id选择器 */
    #example {
        color: red;
    }

    /* class选择器 */
    .example {
        color: blue;
    }

    /* 标签选择器 */
    p {
        color: green;
    }

二、认识选择器组合

可以通过将两个或多个选择器组合在一起来选择特定的HTML元素。

在选择器组合中，多个选择器之间使用空格隔开，表示选择元素的后代关系。

    /* 对id为example的元素下的p元素设置字体颜色 */
    #example p {
        color: red;
    }

    /* 对class为example的p元素设置字体颜色 */
    p.example {
        color: blue;
    }

三、认识属性选择器

属性选择器可选取带有指定属性的元素。

属性选择器可以带有属性值，以便更精细地选择要渲染的元素。

    /* 匹配属性title值为example的a元素 */
    a[title="example"] {
        color: red;
    }

    /* 匹配属性值以example开头的a元素 */
    a[title^="example"] {
        color: blue;
    }

四、认识伪类选择器

伪类选择器指的是那些在选择的元素处于某个状态时，才会起作用的选择器。

常见的伪类选择器包括:hover、:active、:first-child等。

    /* 鼠标放上去时，字体变为红色 */
    a:hover {
        color: red;
    }

    /* 点击过的链接变为灰色 */
    a:visited {
        color: gray;
    }

五、认识伪元素选择器

伪元素选择器用于向某些选择器添加特殊的效果。

常见的伪元素选择器包括::before、::after等。

    /* 在p元素之前添加内容 */
    p::before {
        content: "Hello";
    }

    /* 在p元素之后添加内容 */
    p::after {
        content: "World";
    }