CSS菜鸟学习笔记1-选择器的简单介绍_css 选择器

本文链接：https://blog.youkuaiyun.com/qq_37852350/article/details/125275321

本文详细介绍了CSS设置网页元素样式的三种方式：内联样式、内部样式表和外部样式表，并解析了CSS的语法规范，包括选择器类型（如元素选择器、ID选择器、类选择器等）、复合选择器、关系选择器和属性选择器。此外，还探讨了伪类和伪元素的使用，如超链接伪类和内容插入。内容深入浅出，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS是用来设置网页中元素的样式。

1、设置元素样式的方式

（1）内联样式。在标签内部通过设置style属性来设置元素样式。（不推荐使用。）

<h1 style="color:yellowgreen;font-size:30px;">前端css演示</h1>

（2）内部样式表。将样式编写到head下的style标签中。可以在当前网页对编写的样式复用。

<head>
    <style>
        h2{
            color: blue;
            font-size: larger;
        }
    </style>
</head>
<body>
    <h2>前端css演示</h2>
</body>

（3）外部样式表。将css样式编写到一个外部的css文件中，通过link标签将外部css文件引入当前页面。将样式编写到外部css文件，可以使用浏览器的缓存机制。（开发中推荐使用）

style.css文件
h2{
    color: chartreuse;
    font-size: small;
}

html文件
<head>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h2>前端css演示</h2>
</body>

2、CSS语法规范

选择器+声明块（多个声明组成，每个声明是样式名与样式值成对的结构）

选择器介绍：

常用选择器：

（1）元素选择器，根据标签名来选中指定的元素。标签名{}

（2）id选择器（id的值必须唯一，不能重复），根据元素的id属性值选中一个元素。#id属性值{}

（3）类选择器（class的值可以相同），根据元素的class属性选中一组元素，可以给同一个元素设置多个class属性。 .class属性值{}

（4）通配选择器，选中页面中的所有元素。 *{}

复合选择器：

（1）交集选择器，选中同时复合多个条件的元素。选择器1选择器2....选择器n{}

（2）并集选择器，同时选择多个选择器对应的元素。选择器1，选择器2，....选择器n{}

关系选择器：

（1）子元素选择器，选中指定父元素的指定子元素。父元素>子元素

（2）后代元素选择器，选中指定元素内的指定后代元素。祖先后代

（3）选择下一个兄弟（紧挨着的）。前一个+下一个

（4）选择下边所有的兄弟。兄~（波浪线）弟

属性选择器：

（1）[属性名] 选择含有指定属性的元素

（2）[属性名=属性值]选择含有指定属性和属性值的元素

（3）[属性名^=属性值]选择属性值以指定值开头的元素

（4）[属性名$=属性值]选择属性值以指定值结尾的元素

（5）[属性名*=属性值]选择属性值中含有某值的元素

伪选择器：以：开头

根据所有的子元素排序

（1）:first-child 第一个子元素

（2）:last-child最后一个子元素

（3）:nth-child()选中第n个子元素。n:0-正无穷；2n或even:偶数；2n+1或odd：奇数

在同类型元素中排序

（1）:first-of-type

（2）:last-of-type

（3）:nth-of-type()

（4）:not()否定伪类，将符合条件的元素从选择器中去除。

超链接a标签的伪类：

a:link 表示没有访问过的链接

a:visited 表示访问过的链接

下面两个可以应用于其他标签

a:hover 表示鼠标移入的状态

a:active 表示鼠标点击

<head>
    <style>
        a:visited{
            color:coral
        }
        a:link{
            color:crimson;
        }
        a:hover{
            color: chartreuse;
        }
        a:active{
            color: blue;
        }
    </style>
</head>
<body>
    <a href="https://www.qq.com">超链接1</a>
    <a href="https://www.qq.com.cn">超链接2</a>

</body>

伪元素：

页面中的一些特殊位置。以::开头

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

::before 元素的开始，结合content属性使用

::after 元素的最后，结合content属性使用

<head>
    <style>
        h2::before{
            content: "start";
            color:brown;
        }
        h2::after{
            content: "end";
            color:yellowgreen;
        }
    </style>
</head>
<body>
    <h2>前端css演示</h2>
    <h2>前端css演示</h2>
</body>

上述代码运行结果：