不要重复造轮子，2024 年前端开发必须了解的 7 种 CSS 框架

SS 框架包含多个可供开发人员和网页设计人员使用的现成 CSS 库。样式表是为网页设计中的日常任务而准备的，例如导航栏、字体、颜色和布局设置。它们简化了前端开发人员的工作，为他们提供了创建UI界面的工具，而不是从头开始每个项目。样式表受到 JavaScript 等其他脚本技术的支持和扩展。

使用 CSS 框架时，用户必须使用正确的类、结构和 ID 编写 HTML 代码才能创建网页，因为 CSS 样式表是完整的。前端开发人员使用 CSS 框架快速实现网站和应用程序上的关键用户界面元素，例如按钮、样式表单和自适应网格。

人们为什么使用框架，最直接的答案是效率。框架开箱即用，包含大量元素和样式，否则您在开发网站时需要从头开始构建。许多开发人员和网页设计师也会在构建自定义设计系统之前使用框架快速构建新网站或应用程序的原型。

以下是 2024 年最流行的 CSS 框架列表：

1.Tailwind

根据2023 年 CSS 现状研究，“Tailwind CSS 再次成为开发者乐于继续使用的主要 UI 框架”。

Tailwind 是一个“实用程序优先的CSS 框架”，它提供的类使用户能够直接在用户的标记中创建自定义用户界面。实现内联样式有助于快速创建引人注目的 UI，而无需编写任何 CSS。

Tailwind CSS 是最流行的实用 CSS 库之一，并为网页设计提供了其他显着优势。在实践中，虽然 Tailwind 使读取类属性变得更加困难，但您可以通过它如何简化样式的实际维护来恢复所有这些。Tailwind 还消除了使用中间类名来挂钩样式的需要，这很有帮助，特别是当错误或代码漂移使类名产生误导时。

Tailwind 类和内联样式之间有一个显着区别：特异性！无论源代码组织如何，内联样式都会覆盖基于 CSS 类的样式，当元素需要上下文相关样式时，会导致极其令人沮丧的情况。对于 Tailwind，所有都是类，就像大多数手写 CSS 一样，这使得混合自定义 CSS 和框架样式是可预测的。

2.Bootstrap

Bootstrap由 Twitter 的 Mark Otto 和 Jacob Thornton 创建，是一个开源框架，它使用 CSS 和基于 JavaScript 的界面组件模板来鼓励内部工具之间的一致性。它倡导了现在无处不在的移动优先概念，并为其无缝实施提供了必要的工具。Bootstrap 通过合并网格系统，将屏幕离散地划分为最终用户看不到的列，从而促进了流行的移动优先方法的直接采用。

得益于 Bootstrap，开发人员不再被迫启动单独的项目来仅仅为了调整网站以适应较小的屏幕尺寸。当合并必要的 Bootstrap 类时，设计会自动调整。

由于它是一个广泛使用和测试的库，拥有大量的贡献者和审阅者，因此如果您花时间阅读和理解实际代码（甚至是导致问题的问题），您可以从中学到很多实用的架构/设计选择。给他们）。此外，它还提供了一些非常全面且相对简单的文档。它的可扩展性也很强，同时也是细粒度的。

3.Materialise

Materialise 是由 Google 精心设计和概念化的 CSS 框架，建立在 Material Design 原则之上，Material Design 是一种无缝融合创造力和技术的创新设计语言。谷歌的目标是创建一个设计框架，为任何平台上的所有产品提供统一的用户体验。

该框架提供集成自定义组件、精致动画和过渡的默认样式，确保为用户提供无缝体验。Materialise 作为一个以用户体验为中心的框架脱颖而出，它包含旨在为用户提供增强反馈的组件和动画。提供了详细的文档以及具体的代码示例，以帮助新用户有效地导航该框架。

4.Foundation

Foundation被描述为“世界上最先进的响应式前端框架”，提供了一个全面的工具包，包括网格系统、HTML、SASS 和 CSS 用户界面元素、模板以及包含导航、按钮、排版、表格等等。此外，它还通过 JavaScript 扩展提供可选功能。该框架非常强调移动设备，并且事实证明对于开发需要强大设计基础的大量 Web 应用程序非常有益。

其庞大、灵活的工具包对于广大前端开发人员来说是宝贵的资源，可以帮助他们找到有效的解决方案。Foundation 提供了针对电子邮件和网页量身定制的独特框架组件，可随时部署在各自的域中。此外，它还具有命令行界面（CLI），这对于从事涉及 Webpack 等模块捆绑器的项目的开发人员来说特别有利。

该框架旨在让前端开发人员完全控制其用户界面。它不要求他们使用特定的语言或风格，这使其成为大多数人的首选工具。

5.Bulma

Bulma基于 Flexbox，是一个开源、响应式 CSS 框架，以其卓越的内置功能而闻名，减少了大量手动 CSS 编码的需要，并确保快速响应时间。它使用图块来构建 Metro 风格的网格，从而产生时尚且组织良好的页面布局。用户可以通过仅导入他们想要使用的特定元素来进一步简化流程。

由于其模块化设计方法和高水平的定制化，Bulma 成为开发人员和设计师的最爱。其响应式模板显着减少了设计工作量，提供了下拉菜单、表格、面板和导航栏等各种组件。Bulma 还提供交互式教程和入门模板。此外，该框架拥有庞大的 Stack Overflow 社区，对于获得各种问题的解决方案具有无价的价值。

6.Skeleton

Skeleton在其主页上被描述为“极其简单、响应式的样板”，这个轻量级工具只有 400 行源代码，旨在生成可在移动设备和更大屏幕上无缝运行的 CDD 元素。Skeleton 采用 12 列网格系统，最大宽度为 960px，可容纳小型、中型和大型显示器，只需一行 CSS 代码即可轻松修改。它包含了响应式设计的所有基本元素，具有用户友好的语法，有助于快速实施，使响应式设计的创建变得非常简单。

该工具非常适合设计师入门。如果您正在着手一个较小的项目，或者只是觉得您不需要大型框架的所有实用功能，那么您应该使用 Skeleton。

7.Open Props

Open Props是一个完全基于 CSS 变量构建的低级框架，这意味着它几乎完全可定制，并且可以进行调整以适应任何设计系统。它使用即时编译来保证只生成项目所需的 CSS 变量，这可能有助于提高应用程序的性能。

在 CSS 中使用原始样式表可能会很快失去控制，尤其是在与团队合作时。使用 Tailwind 或 Open Props 等框架使您能够为每个站点创建自定义主题，从而促进高性能内联样式的实现。此外，这些框架具有压缩语法，可以更快地设计样式。如果这些框架提供了您想要的所有样式，为什么还要重新发明轮子呢？使用框架使工作更智能、更轻松，而不是更困难、更繁重。

在开篇

开篇之前，先提个问题，什么是类？分类吗？可以这么说吧！我们可以给物体分类，也可以给人分类。正所谓，物以类聚，人以群分。难道我们这里是给元素分类？用分类来理解是不准确的啦！从某些角度，也可以理解成分类，说白了也就是个标识而已。废话不说，我们正式步入今晚的主题！

HTML类

html中的类是什么鬼？先上个例子，然后再剖析它：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .c1 {
              background-color: tomato;
              color: white;
              border: 2px solid black;
              margin: 20px;
              padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="c1">
            <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        </div>

        <div class="c1">
            <p>笔者亲自设计的，一个入侵性极低的Oracle监控方案</p>
            <a href="https://mp.weixin.qq.com/s/PDm2bK7IMFOwjNHFOblgXg" target="_blank">oracledb_exporter监控Oracle，一个入侵性极低的监控方案。</a>
        </div>

        <div class="c1">
            <p>意犹未尽的第2篇再次推出，一个入侵性极低的Oracle监控方案</p>
            <a href="https://mp.weixin.qq.com/s/gFeWlZRGkIMAOCNFpKm8-Q" target="_blank">意犹未尽的第2篇再次推出，继续讲解oracledb_exporter监控Oracle，一个入侵性极低的监控方案。</a>
        <div>
    </body>
</html>

效果如下图：

好了，我们正式开始对它进行剖析，搞清楚到底啥是类，上面的小栗子中，定义了3个div元素，它们的class属性值均为 "c1"。然后注意到没有？在head中的style标签里，通过 ”.c1“ 的方式同时对3个div进行了css样式的设置。所以也由此引出了它的一个特点，那就是多个HTML元素可以共享同一个类，上述的例子中3个div（元素）的类（class）名都定义了为“c1”，且同时对3个div进行了css样式的设置，这就是它的共享性。不知道笔者说明白了没有，好尴尬。

那接下来，我们再来个小栗子：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .c2 {
                font-size: 120%;
                color: crimson;
            }
        </style>
    </head>
    <body>
        <h1>彩虹<span class="c2">运维</span>技术栈社区</h1>
        <p>我们会<span class="c2">持续分享</span>运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

上面的例子中，“运维”和“持续分享”这两个字都在span标签里，且这两个span标签都定义了class属性，class=“c2”，同时通过“.c2”的方式设置了CSS属性。上面的例子中，就是通过这样的办法实现了对某部分的文字进行样式的设置。

截止目前，我们通过两个小栗子，直接解剖了什么是类，那么我们再做个小总结：

class属性可以用于任何HTML元素
类名区分大小写

CLASS的语法

其实在前面的小栗子中，已经讲解过class的语法了，不知道广大盆友们注意到了没有。如果没有注意到，咱们再这个章节重新复习一下。

看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="cc3">我们会持续分享运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

上面的例子中，是如何引用到文本内容并设置CSS属性的呢？答案就是通过.css3这样的语法，我们设置的类名是css3。然后在style中，设置css属性，在{}大括号里的内容就是CSS的属性，关于CSS，笔者后续会专门逐一讲解哈。

一个元素可以属于多个类

什么？一个元素可以属于多个类？到底怎么玩，废话不说，咱们上个例子就知道了。下面的例子，是在上一个例子的基础上进行了小改造，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
            .css4 {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3 css4">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="cc3">我们会持续分享运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

注意到这个语法了吗？class="cc3 css4"，没错了！在上面的style中，分别对同一个h2元素进行设置了不同的CSS属性。也就是说，对同一个元素需要定义多个类，用空格分隔类名就可以实现啦！是不是太简单了啦？

类的复用

什么？类的复用怎么理解？也就是说不同的元素可以共享同一个类。其实这个概念，在之前的例子中都有用到啦！只不过还没有抛出这个概念而已，下面我们来个小栗子，巩固一下。

这个例子是在上一个例子的基础上做了小改造，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .share_class {
                background-color: blue;
                color: white;
                padding: 8px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="share_class">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="share_class">我们会持续分享运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

注意到了吗？两个元素：h2和p元素，都使用了相同的类，类名叫share_class，这就达到了复用的效果呀！

JavaScript使用class

截止目前，还没讲解到js，那么先讲个小知识点，js如何使用class的。当然，核心的用法也是使用类名为指定的元素完成一些功能，在JavaScript里是通过getElementsByClassName()方法来访问元素中的类名，反言之，也可以说是通过getElementsByClassName()方法来访问带有指定类名的元素。关于js的知识，后续笔者会一一讲解每个知识点，不急，咱们慢慢来。

下面，先来个小栗子，这例子很简单，通过js实现点击后隐藏h2和p元素的内容，下面看代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
    </head>
    <body>
        <button onclick="my_fun()">点击可以隐藏元素哦</button>
        <h2 class="c1">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="c1">我们会持续分享运维和运维开发领域相关的技术文章</p>

    <script>
        function my_fun() {
          var x = document.getElementsByClassName("c1");
          for (var i = 0; i < x.length; i++) {
            x[i].style.display = "none";
          }
        }
    </script>
    
    </body>
</html>

效果如下图：

隐藏前

隐藏后

看到效果了吗？隐藏的功能就是通过js实现的，js很强大，后面我们一起专门分享js的知识点。

写在最后

好了，今晚的知识点分享到此为止啦！诚邀广大盆友的关注，望多多点赞、转发、收藏。

本文转载于（喜欢的盆友关注我们）：https://mp.weixin.qq.com/s/c9tXDae2l1osseOwKzILuQ

SS课堂笔记

1、CSS的概念

层叠样式表(英文全称：Cascading Style Sheets) *层叠：多个样式可以作用在同一个html的元素上，同时生效

是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS很像化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果。

所以，前端程序员相互表白的时候可以说：you are the CSS to my HTML.

这是不是CSS是对HTML进行美化和布局作用的最好总结？

2、CSS的优势

功能强大
将内容展示和样式控制分离

降低耦合度。解耦
让分工协作更容易
提高开发效率

3、CSS的使用：CSS与html结合使用

根据定义CSS的位置不同，分为行内样式、内部样式和外部样式

3.1 行内样式

也称为内联样式

直接在标签中编写样式，通过使用标签内部的style属性；

一般在测试的时候使用居多：
语法：
<html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello my css</html标签>
案例：
<div style="color: red;">hello my css</div>

弊端：只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。

3.2 内部样式

定义在head标签内，通过style标签，该标签内容就是CSS代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内部样式</title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

3.3 外部样式

1、提前定义css资源文件

2、在head标签内，定义link标签引入外部样式文件。

lina.css文件，放在与html页面同级的css文件夹中：
div {
    color: red;
}

html页面中的引入
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部样式</title>
        <link rel="stylesheet" href="css/lina.css" />
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

作用域的范围:外部样式表>内部样式表>行内样式表

优先级：外部样式表<内部样式表<行内样式表;

同样的样式作用在同一个标签身上：就近原则；不同样式作用在同一个标签身上:叠加生效。

4、CSS语法

基本格式：由两个主要的部分构成：选择器，以及一条或多条声明:

选择器 {
        属性1:值1;
        属性2:值2;
        ...
}
选择器:筛选具有相似特征的元素
属性和属性值之间用冒号分割，不同的属性之间用分号隔开。

例如：

5、CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束

/*这是CSS的注释*/
div {
    color: red;  /*文字颜色是红色*/
}

6、基本选择器：筛选具有相似特征的元素

6.1 id选择器

选择具有相同id属性值的元素，建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

PS： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效，使用class选择器。

6.2 class选择器

选择具有相同的class属性值的元素。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

PS：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

6.3 元素选择器/标签选择器

选择具有相同标签名称的元素。

定义选择器语法：标签名称{}；PS：标签名称必须是html提供好的标签。

使用标签选择器：自动使用在所有的同名的标签上

7 优先级

7.1 选择器的优先级

ID选择器 > 类选择器 > 标签选择器

当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

7.2 样式表的优先级

行内样式 > 内部样式 >外部样式

同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

8 CSS常用样式

8.1 color :字体颜色

跟颜色相关的取值分3种：

1、颜色的单词 red blue...

2、rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)

rgba（红，绿，蓝,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六进制数字组成的例如：#FF0000

8.2 width height:宽高

PS：只有块状元素可以设置宽高，行级元素设置不生效。

取值方式有2种：

1：数值绝对数字单位是像素PX

2：百分比：占据父元素的比例

8.3 背景样式

8.4 文本样式

8.5 列表样式

8.6 边框样式

10 HTML&CSS调试利器

以谷歌浏览器为例说明。

快捷键F12或者工具条中的开发者工具调出以下内容。

在elements中可以看到当前页面的所有标签，在styles中可以看到html元素对应的样式。

11 盒子模型

11.1 概念

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型说明图：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

11.2 盒子的宽度和高度

元素的实际宽度和高度：

当我们计算一个元素实际在页面占有的总宽度计算公式是这样的：

总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

11.3 如果想要设置的宽度直接就是元素的实际宽度，通过box-sizing属性

12 补充常用样式

12.1 float 浮动

12.1.1 什么是浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

12.1.2 元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

12.1.3 彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

12.1.4 clear--清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style>
            div{
                width: 400px;
                height: 200px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <!--没有浮动属性的元素都属于常规文档流：从上往下从左往右依次显示
            浮动的元素都脱离了常规文档流；
            为了好理解：大家可以认为浮动元素属于一层，非浮动元素属于一层
            如果想要非浮动元素不受浮动元素的影响，需要使用clear属性
        -->
        <div style="background: rgba(255,0,0,0.5); float: left;">
            div1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
        </div>
        <div style="background: lawngreen; width: 600px; height: 350px; ">
            div2-未浮动，常规文档流,
            <br/>PS:此时div1在div2的上方显示，因为div1和div2是不同文档流中的元素，显示互不影响
            如果不想让div2被浮动元素影响，需要添加clear属性。
            添加clear: left;之后div2就会忽略div1浮动的影响，在div1层后面显示，不会重叠了，大家可以自己试验一下
        </div>
        <div style="background: lightblue; float: right; width: 1800px;">
            div3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
        </div>
        <div style="background: lightcoral; width: 600px; height: 350px; ">
            div4-未浮动，常规文档流,
            <br/>PS:此时div3在div4的上方显示，因为div3和div4是不同文档流中的元素，显示互不影响
            如果不想让div4被浮动元素影响，需要添加clear属性。
            添加clear: right;之后div4就会忽略div3浮动的影响，在div3层后面显示，不会重叠了，大家可以自己试验一下
            
            clear属性有三个取值：left、right、both;分别是取出左浮动、有浮动和所有浮动元素的影响
        </div>
        <div style="background: lavender;">
            div5-未浮动，常规文档流,
        </div>
    </body>
</html>

12.2 overflow

控制内容溢出元素框时显示的方式。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

12.3 Display(显示) 与 Visibility（可见性）

12.3.1 两者的区别

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

12.3.2 display 改变元素的类型

CSS样式有以下三个：

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

13 复合选择器

由两个或多个基础选择器，通过不同方式组合而成的。

可以更准确更精细的选择目标元素标签。

13.1 全局选择器

语法：* {} 一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，一般将 * 替换为常用标签的名称，并用逗号分隔，其实就是使用并集选择器。

13.2 并集选择器

并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

语法：选择器1，选择器2，......选择器N{}

意思是多个选择器都是通用的样式。任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

13.3 交集选择器

条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

语法：h3.class{ color:red; }

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，例如div.list。

交集选择器是并且的意思。即...又...的意思

例如：   table.bg   选择的是： 类名为 .bg  的 表格标签，但用的相对来说比较少。

13.4 后代选择器

概念：后代选择器又称为包含选择器。

作用：用来选择元素或元素组的子孙后代。

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

  格式：父级 子级{属性:属性值;属性:属性值;}

语法：.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

13.5 子元素选择器

作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。

语法：.class>h3{color:red;font-size:14px;}

 比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

13.6 实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复合选择器</title>
		<style>
			/*全局选择器：
			 	一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，
			 */
			*{
				color: #333;/*定义全局文字颜色，统一色彩基调*/
			}
			/*并集选择器：通常用于集体声明
			 	替换全局选择器；
			 */
			div,p,dldt,dd{
				/*去掉浏览器的默认样式*/
				margin: 0;
				padding: 0;
				color: #333;/*定义全局文字颜色，统一色彩基调*/
			}
			/*交集选择器*/
			li.myli{
				color: red;
			}
			/*后代选择器*/
			ul li{
				font-size: 28px;
			}
			.myUL li{
				font-family: "微软雅黑";
			}
			.myUL li a{
				text-decoration: line-through;
			}
			/*子元素选择器*/
			.demo>h3{
				color: red;
			}			
		</style>
		
	</head>
	<body>
		<ul>
			<li>li11111111111</li>
			<li class="myli">li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444<a href="">点击我试试</a></li>
			<li class="myUL">
				<ul>
					<li>li11111111111</li>
					<li class="myli">li22222222222</li>
					<li>li33333333333</li>
					<li>li44444444444
						<a href="">点击我试试</a>
					</li>
				</ul>
			</li>
		</ul>
		<ol>
			<li>li11111111111</li>
			<li>li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444</li>
		</ol>
		<div class="demo">
			div1
			<h3>静夜思</h3>	
			<ul>
				<li><h3>静夜思----li</h3></li>
			</ul>
		</div>
		
	</body>
</html>

13.6 伪类选择器

伪类选择器：和类选择器相区别类选择器是一个点比如 .demo {} 而我们的伪类用 2个点就是冒号比如 :link{} 。

作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<style>			
			/*伪类选择器*/			
			a:link{
				color: red;/*默认颜色是红色*/	
			}
			a:visited{
				color: blue;/*访问过的页面是蓝色*/	
			}
			a:hover{
				color: green;/*鼠标悬浮是绿色*/	
				font-size: 28px;
			}
			a:active{
				color: gold;/*按下鼠标不放手是金色*/	
				font-family: "微软雅黑";
			}
		</style>
		
	</head>
	<body>
		<a href="03-常用样式.html" target="_blank">常用样式</a>
		<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
		<a href="05-综合练习.html" target="_blank">综合练习</a>
	</body>
</html>

注意**

写的时候，他们的顺序尽量不要颠倒按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
实际开发中，我们很少写全四个状态，一般我们写法如下：

a {   /* a是标签选择器  所有的链接 */
       font-weight: 700;
       font-size: 16px;
       color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
       color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

13.7 复合选择器比对

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 p .one
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

在线咨询

上一篇：javascript反转字符串的方法有哪些？
下一篇：Web前端开发基础知识，设置网页背景图，如何在网页中插入图片

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

不要重复造轮子，2024 年前端开发必须了解的 7 种 CSS 框架

1.Tailwind

2.Bootstrap

3.Materialise

4.Foundation

5.Bulma

6.Skeleton

7.Open Props

在开篇

HTML类

CLASS的语法

一个元素可以属于多个类

类的复用

JavaScript使用class

写在最后

SS课堂笔记

1、CSS的概念

2、CSS的优势

3、CSS的使用：CSS与html结合使用

3.1 行内样式

3.2 内部样式

3.3 外部样式

4、CSS语法

5、CSS注释

6、基本选择器：筛选具有相似特征的元素

6.1 id选择器

6.2 class选择器

6.3 元素选择器/标签选择器

7 优先级

7.1 选择器的优先级

7.2 样式表的优先级

8 CSS常用样式

8.1 color :字体颜色

8.2 width height:宽高

8.3 背景样式

8.4 文本样式

8.5 列表样式

8.6 边框样式

10 HTML&CSS调试利器

11 盒子模型

11.1 概念

11.2 盒子的宽度和高度

11.3 如果想要设置的宽度直接就是元素的实际宽度，通过box-sizing属性

12 补充常用样式

12.1 float 浮动

12.1.1 什么是浮动

12.1.2 元素怎样浮动

12.1.3 彼此相邻的浮动元素

12.1.4 clear--清除浮动

12.2 overflow

12.3 Display(显示) 与 Visibility（可见性）

12.3.1 两者的区别

12.3.2 display 改变元素的类型

13 复合选择器

13.1 全局选择器

13.2 并集选择器

13.3 交集选择器

13.4 后代选择器

13.5 子元素选择器

13.6 实现代码

13.6 伪类选择器

13.7 复合选择器比对

您的项目需求