【CSS】基础选择器，包括标签选择器、类选择器、id 选择器和通配符选择器...

作者：翼同学

2022 年 8 月 02 日
本文字数：2846 字
阅读完需：约 9 分钟

一、前言

今天的笔记是：

CSS 概述、基础选择器（包括标签选择器、类选择器、id 选择器和通配符选择器）

二、概述

什么是 CSS？

CSS（Cascading Style Sheets）指的是层叠样式表，是一种描述HTML文档样式的语言。也就是说CSS用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

特点如下：

🌳CSS 语法规范

CSS 样式规则由两部分组成：

选择器
一条或多条声明

举个例子：

选择器就是选择某个标签，后跟一对花括号，里面设置着具体样式；
每一条声明都是由属性和属性值构成（值键对形式），属性和属性值之间用:分开；
属性是对指定对象设置的样式属性（例如字体颜色或大小等）；多个样式之间用分号;隔开；

选择器可以分为基础选择器和复合选择器，这篇笔记先记录基础选择器的使用。

🌻CSS 引入方式

CSS 的三种引入方式：

行内 CSS

行内样式表又称内联样式表。我们知道，HTML 标签有一个style属性。行内 CSS 就是在HTML元素标签内部的style属性中设置样式，这种方式适用于设置简单样式。

举个例子：

<p style="color:red; text-align:center;">段落</p>

复制代码

总结的说，行内 CSS 可以为单个元素设置唯一的样式，方法是将style属性添加到元素属性中（style属性可以包含任何 CSS 属性）

内部 CSS

内部样式表又称嵌入式样式，就是将 CSS 样式单独拿出来放在<style>标签写入 html 页面内部。

<style>  p {    color: red;    text-align: center;  }</style>

复制代码

<style>标签理论上可以放在 HTML 文档的任何位置，但是通常我们会将其放在文档的<head>标签中。内部样式表使得整个文档的结构更加清晰，方便我们控制当前页面中的元素样式。

外部 CSS

通常在开发中，样式较多，此时一般使用外部样式表。做法是将样式单独写到 CSS 文件中，再将 CSS 文件导入到 HTML 文档中。

步骤为：

新建一个后缀名为：.css的样式文件，将需要的样式代码写入到该文件中；
在 HTML 文档中，使用<link>标签引入该样式文件。

举个例子，当我们需要将style.css文件导入HTML文档时，link 标签使用方法如下：

<link rel="stylesheet" type="text/css" href="style.css">

复制代码

浏览器会从style.css文件中读到样式声明，并以此来格式化文档。需要注意的是，CSS 文件中不能包含任何 HTML 元素。样式表的后缀扩展名为.css。使用外部样式表，使得我们让多个页面具有公共的样式更加的方便，只需引入样式文件即可。

🎐注释

在 CSS 中，注释以/*开始，以*/结束

使用注释可以很好的记录一些想法以及备注，浏览器会忽略注释。

<style>  /* 这是一段注释 */  body {    /* 这是另一段注释 */    text-align: center;  }</style>

复制代码

三、基础选择器

基础选择器就是由单个选择器组成，一般包括标签选择器、类选择器、id 选择器和通配符选择器。

💡标签选择器

标签选择器又称元素选择器，用于指定 HTML 里的某个标签名称作为选择器，为这些选择的标签指定统一的 CSS 样式。

作用

标签选择器可以把某一类标签全部选出来。比如将 HTML 中全部的<p>标签选中。

优点

快速为页面中同一类型的标签统一设置样式。

缺点

无法差异化设置样式。

举例

比如我们将 HTML 文档中所有段落的文本都设置为蓝色并且居中显示，那么如下所示：

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>测试</title>    <style>        p {            color: skyblue;            text-align: center;        }    </style></head>
<body>    <p>这是段落一</p>    <p>这是段落二</p>    <p>这是段落三</p></body></html>

复制代码

💡类选择器

由于标签选择器能将所有选中的标签都设置统一的样式，导致无法差异化修饰元素。此时，类选择器可以解决这个问题。

类选择器可以单独选择某个标签或者若干个标签。语法如下：

.类名 {  属性1: 属性值1;  属性2: 属性值1;  ...}

复制代码

因此，类选择器的用法如下：

在 HTML 标签中设置class属性，指定一个类名；
在<style>标签中使用类选择器设置特定样式；
类选择器使用.，后跟类名（类名就是指定标签中的class属性的值，由我们自己定义）
.类名后面紧跟花括号，并在花括号里面编写指定的样式；

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试</title>    <style>        /* 标签选择器 */        body {            text-align: center;        }        /* 类选择器 */        .blue {            color: skyblue;        }    </style></head>
<body>    <h1>临江仙·十二高峰天外寒</h1>    <p class="blue">        十二高峰天外寒，竹梢轻拂仙坛。        宝衣行雨在云端，画帘深殿，香雾冷风残。    </p>
    <p>        欲问楚王何处去？翠屏犹掩金鸾。        猿啼明月照空滩，孤舟行客，惊梦亦艰难。    </p></body></html>

复制代码

当然，标签的class属性可以有多个类名，类名之间用空格隔开。这个标签就可以具有这些类名的样式。多类名的好处在于可以将一些样式放到类里面，每个标签都可以调用这个公共的类，也能调用自己独有的类，这同样也节省了 CSS 代码，统一修改样式也更加方便。

💡id 选择器

由于 HTML 元素的 id 属性是唯一的，因此 id 选择器可以为某个标签指定特定的样式。也就是说，id 选择器用于选择一个唯一的元素，用 id 属性名来设置 id 选择器，CSS 中 id 选择器以“#”来定义，后跟该元素的 id。

语法如下:

#id名 {  属性1: 属性值1;  属性2: 属性值2;  ...}

复制代码

我们知道id属性在每个HTML的标签中只出现一次，因此id选择器与类选择器的区别在于使用次数上，id选择器好比身份证号码，无法重复使用，所以id选择器适用于页面上具有唯一性的元素上。

举例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试</title>    <style>        /* 标签选择器 */        body {            text-align: center;        }        /* id选择器 */        #para1 {            color: skyblue;        }    </style></head>
<body>    <h1>临江仙·十二高峰天外寒</h1>    <p id="para1">        十二高峰天外寒，竹梢轻拂仙坛。        宝衣行雨在云端，画帘深殿，香雾冷风残。    </p>
    <p>        欲问楚王何处去？翠屏犹掩金鸾。        猿啼明月照空滩，孤舟行客，惊梦亦艰难。    </p></body></html>

复制代码

效果如下：

💡通配符选择器

通配符选择器又称通用选择器，在 CSS 中，通配选择器使用星号*来定义通配符选择器，其表示为当前页面中所有标签设置样式。

语法如下：

* {  属性1: 属性值1;  属性2: 属性值2;  ...}

复制代码

💡小结

标签选择器用于选出所有指定的标签，其无法差异性选择。举例：p { color: red; }
类选择器用于选出指定类名的标签，可以根据需求选择。举例： .red { color: red; }
id 选择器一次只能选择一个标签，因为 id 属性在每个 HTML 标签中只出现一次。举例：#nav { color: red; }
通配符选择器为所有的标签设置样式，一般用于特殊情况。举例： * { color: red; }

四、写在最后

好了，本篇笔记就到写这，欢迎大家到评论区一起讨论！

发布于: 2022 年 08 月 02 日阅读数: 52

原文链接:【http://xie.infoq.cn/article/b783ec6bef82e002d344779f0】。文章转载请联系作者。

翼同学

关注

还未添加个人签名 2022.08.02 加入

还未添加个人简介

发布

暂无评论

创作场景

【CSS】基础选择器，包括标签选择器、类选择器、id 选择器和通配符选择器...

一、前言

二、概述

什么是 CSS？

🌳CSS 语法规范

🌻CSS 引入方式

🎐注释

三、基础选择器

💡标签选择器

💡类选择器

💡id 选择器

💡通配符选择器

💡小结

四、写在最后

翼同学

评论