深入理解 CSS 选择器:从基础到高级的样式控制

引言

在网页设计与开发中,CSS(层叠样式表)扮演着至关重要的角色,它赋予了 HTML 页面丰富的视觉效果和交互性。而 CSS 选择器则是 CSS 的核心机制之一,通过选择器,我们能够精准地指定要应用样式的 HTML 元素,从而实现对网页样式的精细控制。从简单地选中页面上的所有段落元素,到根据元素的特定属性、在文档中的位置以及用户交互状态来选择元素,CSS 选择器提供了多种多样的选择方式,满足了不同场景下的样式需求。深入理解 CSS 选择器不仅能够提升我们编写高效、可维护 CSS 代码的能力,还能为创造出美观、用户体验良好的网页奠定坚实基础。

一、CSS 选择器基础

(一)元素选择器

元素选择器是 CSS 中最基本、最常用的选择器类型。它通过指定 HTML 元素的标签名来选中页面中所有该类型的元素。例如,使用p选择器可以选中页面上的所有段落元素:

p {color: blue;font-size: 16px;
}

在上述代码中,所有<p>标签包裹的文本都会被设置为蓝色,字体大小为 16 像素。元素选择器的作用范围广泛,能够快速统一某类元素的基本样式,为页面构建一致的风格。

(二)类选择器

类选择器允许我们根据元素的class属性值来选择元素。在 HTML 中,我们可以为多个元素添加相同的class属性,然后通过对应的类选择器来应用相同的样式。类选择器以点号(.)开头,后面跟着类名。例如:

<div class="highlight">这是一个带有highlight类的div</div>
<p class="highlight">这是一个带有highlight类的段落</p>
.highlight {background-color: yellow;color: red;
}

上述 CSS 代码会将所有具有highlight类的元素背景设置为黄色,文本颜色设置为红色,无论是<div>还是<p>元素。类选择器的灵活性在于它可以跨不同类型的元素应用样式,方便我们对页面中需要特殊样式的部分进行统一设置。

(三)ID 选择器

ID 选择器通过元素的id属性来选择特定的单个元素。在 HTML 文档中,id属性的值在整个页面中必须是唯一的。ID 选择器以井号(#)开头,后面跟着 ID 值。例如:

<div id="unique-section">这是一个具有唯一ID的div</div>
#unique-section {border: 2px solid green;padding: 10px;
}

这段代码会为idunique-section<div>元素添加一个 2 像素宽的绿色边框,并设置 10 像素的内边距。由于 ID 的唯一性,ID 选择器通常用于为页面中独一无二的元素设置特定样式,比如页面的导航栏、主内容区域等。

二、组合选择器

(一)后代选择器

后代选择器用于选择某个元素的所有后代元素。它通过空格来连接两个或多个选择器,前面的选择器指定祖先元素,后面的选择器指定后代元素。例如:

<div class="container"><p>这是容器内的段落</p><ul><li>列表项1</li><li>列表项2</li></ul>
</div>
.container p {color: purple;
}

在上述例子中,.container p选择器会选中classcontainer<div>元素内部的所有<p>元素,并将它们的文本颜色设置为紫色。后代选择器在处理具有层级结构的 HTML 文档时非常有用,能够精确地控制特定区域内元素的样式。

(二)子选择器

子选择器与后代选择器类似,但它只选择直接子元素,不包括孙辈及更深层次的元素。子选择器使用大于号(>)来连接选择器。例如:

<div class="parent"><p>这是直接子元素段落</p><div><p>这是孙辈段落</p></div>
</div>
.parent > p {font-weight: bold;
}

这里,.parent > p选择器只会将classparent<div>元素的直接子元素<p>的字体加粗,而不会影响到孙辈的<p>元素。子选择器在需要明确区分直接子元素和后代元素样式时发挥作用,使样式控制更加精准。

(三)相邻兄弟选择器

相邻兄弟选择器用于选择紧接在另一个元素后面的同级元素。它使用加号(+)来连接两个选择器,前面的选择器指定参考元素,后面的选择器指定相邻兄弟元素。例如:

<h2>标题</h2>
<p>紧跟标题的段落</p>
<p>另一个段落</p>
h2 + p {text-decoration: underline;
}

在这个例子中,h2 + p选择器会将紧跟在<h2>标题后面的第一个<p>元素的文本加上下划线,而不会影响到第二个<p>元素。相邻兄弟选择器适用于对相邻元素之间的样式关系进行特殊处理的场景。

(四)通用兄弟选择器

通用兄弟选择器选择的是与参考元素同级的所有后续元素。它使用波浪号(~)来连接选择器。例如:

<h3>标题</h3>
<p>第一个段落</p>
<p>第二个段落</p>
<ul><li>列表项</li>
</ul>
<p>第三个段落</p>
h3 ~ p {color: gray;
}

上述代码会将<h3>标题之后的所有同级<p>元素的文本颜色设置为灰色,包括 “第一个段落”“第二个段落” 和 “第三个段落”。通用兄弟选择器在需要对一组同级元素中的后续元素统一设置样式时非常方便。

三、属性选择器

(一)简单属性选择器

简单属性选择器允许我们根据元素是否具有某个属性来选择元素,或者根据属性的值来选择元素。例如,要选择所有带有href属性的<a>元素,可以使用以下选择器:

a[href] {text-decoration: none;
}

这段代码会移除所有带有href属性的链接的下划线。如果要选择href属性值为特定 URL 的<a>元素,可以这样写:

a[href="https://example.com"] {color: green;
}

这将把链接到https://example.com<a>元素文本颜色设置为绿色。

(二)部分属性值选择器

  1. 包含属性值选择器:包含属性值选择器用于选择属性值中包含特定字符串的元素。使用中括号([]),在属性名后面加上*=运算符。例如:
<a href="https://example.com/products">产品页面</a>
<a href="https://example.com/services">服务页面</a>
a[href*="example.com"] {font-weight: bold;
}

上述代码会将所有链接中包含example.com<a>元素字体加粗。
2. 以特定值开头的属性值选择器:该选择器选择属性值以特定字符串开头的元素,使用^=运算符。比如:

<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/responsive.css">
link[href^="styles/"] {/* 样式设置 */
}

这会选中所有href属性值以styles/开头的<link>元素。
3. 以特定值结尾的属性值选择器:用于选择属性值以特定字符串结尾的元素,使用$=运算符。例如:

<a href="document.pdf">下载PDF文档</a>
<a href="image.jpg">查看图片</a>
a[href$=".pdf"] {/* 样式设置 */
}

这段代码会选择所有链接到 PDF 文件的<a>元素。

四、伪类选择器

(一)动态伪类

  1. :hover 伪类:hover伪类用于选择鼠标悬停在其上的元素。它为用户提供了交互反馈,增强了用户体验。例如:
button:hover {background-color: lightblue;
}

当鼠标悬停在<button>元素上时,按钮的背景颜色会变为浅蓝色。
2. :active 伪类:active伪类选择的是被激活(通常是鼠标按下但未释放)的元素。常用于按钮点击效果的设置:

a:active {color: red;
}

当用户点击链接时,链接文本颜色会变为红色。
3. :focus 伪类:focus伪类选择当前获得焦点的元素,比如输入框在被点击进入编辑状态时。例如:

input:focus {border-color: green;
}

<input>输入框获得焦点时,其边框颜色会变为绿色,提示用户当前可进行输入操作。

(二)目标伪类

:target伪类选择的是当前 URL 中#后面指定的目标元素。例如,当页面中有一个带有idsection1的元素,并且 URL 为page.html#section1时:

<a href="#section1">跳转到Section 1</a>
<div id="section1">这是Section 1的内容</div>
#section1:target {background-color: yellow;
}

当页面跳转到section1时,该<div>元素的背景颜色会变为黄色。

(三)语言伪类

:lang()伪类根据元素的lang属性值来选择元素,用于设置不同语言内容的样式。例如:

<p lang="en">This is an English paragraph.</p>
<p lang="zh">这是一段中文段落。</p>
p:lang(en) {font-family: Arial, sans-serif;
}
p:lang(zh) {font-family: SimSun, serif;
}

上述代码会为英文段落设置 Arial 字体,为中文段落设置宋体字体。

(四)UI 元素状态伪类

  1. :enabled 和:disabled 伪类:enabled伪类选择所有启用状态的表单元素,:disabled伪类选择所有禁用状态的表单元素。例如:
<input type="text" enabled>
<input type="text" disabled>
input:enabled {border-color: blue;
}
input:disabled {background-color: lightgray;
}

这会使启用的输入框边框为蓝色,禁用的输入框背景为浅灰色。
2. :checked 伪类:checked伪类选择被选中的单选按钮(<input type="radio">)或复选框(<input type="checkbox">)。例如:

<input type="checkbox" id="option1">
<label for="option1">选项1</label>
input:checked + label {color: green;
}

当复选框被选中时,其关联的<label>元素文本颜色会变为绿色。

(五)结构性伪类

  1. :first-child 和:last-child 伪类:first-child伪类选择父元素的第一个子元素,:last-child伪类选择父元素的最后一个子元素。例如:
<ul><li>第一项</li><li>第二项</li><li>第三项</li>
</ul>
li:first-child {font-weight: bold;
}
li:last-child {text-decoration: underline;
}

这会使列表的第一个<li>元素字体加粗,最后一个<li>元素文本加下划线。
2. :nth-child () 伪类:nth-child()伪类允许我们选择父元素中特定位置的子元素。它接受一个参数,可以是数字、关键字或表达式。例如,要选择列表中的偶数项:

li:nth-child(even) {background-color: lightgray;
}

或者选择第 3 个及以后的子元素:

li:nth-child(n + 3) {color: red;
}
  1. :nth-of-type () 伪类:nth-of-type()伪类与:nth-child()类似,但它只考虑同类型的元素。例如:
<div><p>第一个段落</p><h3>标题</h3><p>第二个段落</p>
</div>
p:nth-of-type(2) {/* 样式设置 */
}

这里会选择<div>中第二个<p>元素,而不会受<h3>元素的影响。
4. :not () 伪类:not()伪类用于选择不符合特定选择器的元素。例如:

li:not(.active) {/* 样式设置 */
}

这会选择所有不具有active类的<li>元素。

五、伪元素选择器

(一)::before 和::after 伪元素

::before::after伪元素允许我们在元素的内容之前或之后插入额外的内容,并为其设置样式。它们需要配合content属性使用。例如:

p::before {content: "👉 ";color: blue;
}
p::after {content: " 👈";color: green;
}

上述代码会在每个<p>元素的文本前面添加一个蓝色的向右箭头,后面添加一个绿色的向左箭头。

(二)::first-letter 和::first-line 伪元素

  1. ::first-letter 伪元素::first-letter伪元素用于选择元素文本的第一个字母。常用于实现首字下沉效果:
p::first-letter {font-size: 2em;float: left;margin-right: 5px;
}

这会将<p>元素的第一个字母字体放大为原来的 2 倍,并向左浮动,与后面的文本形成首字下沉的视觉效果。
2. ::first-line 伪元素::first-line伪元素选择元素的第一行文本。例如:

p::first-line {font-weight: bold;
}

这会将<p>元素的第一行文本设置为加粗样式。

(三)::selection 伪元素

::selection伪元素用于设置用户选中元素文本时的样式。例如:

::selection {background-color: yellow;color: purple;
}

当用户在页面上选中任何文本时,选中部分的背景会变为黄色,文本颜色变为紫色,为用户提供了独特的视觉反馈。

六、选择器的优先级

(一)重要性声明

在 CSS 中,可以使用!important声明来提高样式规则的优先级。当一个样式属性后面加上!important时,该样式将覆盖其他来源的样式,除非其他样式也使用了!important声明且优先级更高。例如:

p {color: blue!important;
}

这段代码中的蓝色文本颜色设置将很难被其他普通样式覆盖,但需要注意的是,过度使用!important会使样式表难以维护,应谨慎使用。

(二)选择器的特异性

选择器的特异性是决定样式优先级的重要因素。特异性通过计算选择器中不同类型选择器的数量来确定。具体计算规则如下:

  1. 内联样式:内联样式(即在 HTML 元素的style属性中定义的样式)具有最高的特异性,记为 1,0,0,0。
  2. ID 选择器:每个 ID 选择器记为 0,1,0,0。
  3. 类选择器、属性选择器和伪类选择器:每个类选择器、属性选择器或伪类选择器记为 0,0,1,0。
  4. 元素选择器和伪元素选择器:每个元素选择器或伪元素选择器记为 0,0,0,1。

例如,一个选择器.my-class p(一个类选择器和一个元素选择器)的特异性为 0,0,1,1,而#my-id(一个 ID 选择器)的特异性为 0,1,0,0,因此#my-id的特异性更高,当两者样式冲突时,#my-id的样式将被应用。

(三)样式表的顺序

当多个样式规则具有相同的特异性时,后出现的样式规则会覆盖先出现的样式规则。例如:

p {color: red;
}
p {color: green;
}

在上述代码中,段落文本最终会显示为绿色,因为第二个p选择器的样式声明在后面。

(四)继承的样式与直接应用的样式

继承的样式在优先级计算中处于较低层次。当一个元素从其父元素继承样式时,这些继承来的样式的优先级低于直接应用到该元素上的样式。例如,假设在 HTML 文档的<body>元素上设置了一个全局字体颜色:

body {color: gray;
}

然后,对于页面中的某个<p>元素,如果没有直接为其设置color属性,它将继承<body>的灰色字体颜色。但如果为该<p>元素单独设置了颜色:

p {color: blue;
}

那么<p>元素的文本颜色将是蓝色,因为直接应用到<p>元素的样式优先级高于从<body>继承来的样式。这体现了 CSS 样式表设计中 “就近原则”,直接针对元素的样式设置会覆盖从上层元素继承而来的样式。

(五)优先级冲突解决案例分析

为了更好地理解选择器优先级,我们来看一个复杂的案例。假设有以下 HTML 结构:

<div id="parent" class="container"><p class="highlight">这是一段文本</p>
</div>

以及如下 CSS 样式:

#parent p {color: red;
}
.container.highlight {color: green;
}
p {color: blue;
}

在这个例子中,#parent p是一个 ID 选择器(#parent)和一个元素选择器(p)的组合,其特异性为 0,1,0,1;.container.highlight是两个类选择器(.container.highlight)的组合,特异性为 0,0,2,0;而单独的p选择器特异性为 0,0,0,1。根据特异性规则,0,0,2,0 大于 0,1,0,1 大于 0,0,0,1,所以最终<p>元素的文本颜色会是绿色,尽管#parent p选择器看起来更具体地指向了目标<p>元素,但由于类选择器组合的特异性更高,.container.highlight的样式生效。

(六)利用优先级优化样式表

在实际项目中,理解选择器优先级有助于编写更高效、更易维护的样式表。

  1. 避免不必要的高特异性选择器:虽然使用高特异性选择器(如大量使用 ID 选择器)可能在某些情况下能快速实现样式效果,但这会使样式表变得难以维护。因为高特异性选择器会覆盖其他低特异性选择器的样式,当需要修改样式时,可能需要在多个地方调整高特异性选择器,增加了出错的可能性。例如,尽量避免在全局样式表中使用类似#main-content #sidebar p这样过于具体的选择器,而是通过合理的类选择器组合来实现相同效果,如.main-content.sidebar p,这样在需要调整样式时更具灵活性。
  2. 利用优先级实现样式的局部与全局控制:可以巧妙地利用选择器优先级来实现样式的局部和全局控制。例如,在一个网站项目中,有一个全局的按钮样式:
button {background-color: lightblue;color: white;border: none;padding: 10px 20px;
}

而在某个特定的页面区域(如一个模态框内),需要按钮有不同的样式:

.modal button {background-color: orange;
}

这里,.modal button选择器的特异性高于单独的button选择器,所以在模态框内的按钮会显示橙色背景,而其他地方的按钮仍保持浅蓝色背景,实现了局部样式对全局样式的覆盖,同时又不影响全局样式在其他区域的应用。
3. 调试和排查样式问题:当页面出现样式不符合预期的情况时,选择器优先级知识是排查问题的关键。通过检查不同选择器的特异性以及样式表的顺序,可以快速定位到是哪些样式规则相互冲突导致了问题。例如,如果一个元素的颜色没有按照预期显示,可能是因为某个高特异性选择器的样式覆盖了原本期望的样式,通过分析选择器优先级就能找到并解决问题。

(七)未来发展趋势对选择器优先级的影响

随着 CSS 的不断发展,新的特性和选择器可能会对选择器优先级产生一定影响。例如,CSS 的一些新的布局模块(如 CSS Grid 和 Flexbox)可能引入特定的选择器或样式规则,这些新规则在优先级计算中如何与现有的选择器相互作用,需要开发者持续关注。同时,CSS 变量(Custom Properties)的广泛应用也可能改变优先级的考量方式。虽然 CSS 变量本身并不直接影响选择器优先级,但当变量在不同特异性的选择器中被使用时,其解析和应用的顺序可能会影响最终的样式呈现。例如:

:root {--main-color: blue;
}
#special-section {--main-color: green;
}
p {color: var(--main-color);
}

在这个例子中,#special-section中定义的--main-color变量由于其所在选择器的特异性较高,在该区域内会覆盖:root中定义的变量值,从而影响p元素的颜色。随着 CSS 的进一步发展,新的特性和语法可能会为选择器优先级带来更多的变化和挑战,开发者需要不断学习和适应这些变化,以更好地掌握和运用 CSS 样式控制。

通过深入理解 CSS 选择器的优先级,开发者能够更加精确地控制网页样式,避免样式冲突,优化样式表结构,从而打造出风格统一、易于维护的高质量网页。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/899925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GitHub与Gitee各是什么?它们的区别与联系是什么?

李升伟 整理 GitHub 介绍 GitHub 是一个基于 Git 的代码托管平台&#xff0c;主要用于版本控制和协作开发。它支持多人协作&#xff0c;提供代码托管、问题跟踪、代码审查、项目管理等功能。GitHub 是全球最大的开源社区&#xff0c;许多知名开源项目都在此托管。 主要功能&…

ESLint语法报错

ESLint语法报错 运行报错 You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file.解决方案 关闭eslint的语法检测&#xff0c;在eslintrc.js文件中…

单例模式与线程安全

目录 线程安全和重⼊问题 死锁和活锁 死锁 死锁四个必要条件 活锁 STL,智能指针和线程安全 线程安全的单例模式 饿汉模式 懒汉模式 懒汉模式实现单例模式(线程安全版本) 饿汉模式实现单例模式 我们来学习单例模式与线程安全 线程安全和重⼊问题 线程安全&#xff…

Python+AI提示词用贝叶斯样条回归拟合BSF方法分析樱花花期数据模型构建迹图、森林图可视化

原文链接&#xff1a;https://tecdat.cn/?p41308 在数据科学的领域中&#xff0c;我们常常会遇到需要处理复杂关系的数据。在众多的数据分析方法中&#xff0c;样条拟合是一种非常有效的处理数据非线性关系的手段。本专题合集围绕如何使用PyMC软件&#xff0c;对樱花花期数据进…

WPF学习路线

WPF学习路线 学习准备学习技术栈学习路线 1-5&#xff08;1-2周&#xff09;6-8&#xff08;3-5周&#xff09; 学习准备 个人认为前端技术一般几个关键字&#xff1a;元素资源 控制元素资源组合或者动态交互 数据交互呈现分析关键字得到的就是几个方向 布局 样式 组装资源控件…

31天Python入门——第20天:魔法方法详解

你好&#xff0c;我是安然无虞。 文章目录 魔法方法1. __new__和__del__2. __repr__和__len__3. __enter__和__exit__4. 可迭代对象和迭代器5. 中括号[]数据操作6. __getattr__、__setattr__ 和 __delattr__7. 可调用的8. 运算符 魔法方法 魔法方法: Python中的魔法方法是一类…

栈 —— 数据结构基础刷题路程

一、P1739 表达式括号匹配 - 洛谷 算法代码&#xff1a; #include<bits/stdc.h> using namespace std; const int N300008; struct mystack {int a[N];int t-1;//压栈void push(int data){a[t]data; } //取栈顶元素int top(){return a[t]; } //弹出栈顶元素void pop(){i…

瑞昱RTD2556QR显示器驱动芯片

一、概述 RTD2556QR芯片是由Realtek公司精心研发的一款高性能显示驱动芯片&#xff0c;专为满足现代显示设备对高分辨率、多功能接口及稳定性能的需求而设计。该芯片凭借其卓越的技术特性和广泛的应用领域&#xff0c;在显示驱动市场中占据重要地位。它集成了多种先进的功能模…

PyQt5和OpenCV车牌识别系统

有需要请加文章底部Q哦 可远程调试 PyQt5和OpenCV车牌识别系统 一 介绍 此车牌识别系统基于PyQt5和OpenCV开发&#xff0c;蓝牌&#xff0c;新能源(绿牌)&#xff0c;黄牌&#xff0c;白牌均可以准确识别&#xff0c;支持中文识别&#xff0c;可以导出识别结果(Excel格式)。此…

学有所记- 探索FastAPI在docker上的部署

目标&#xff1a; 学习怎样在docker中安装部署FastAPI&#xff0c;完成项目结构的搭建以及hello world的运行 背景&#xff1a; 公司内服务器资源有限&#xff0c;为了共享算力资源&#xff0c;同时又能隔离运行环境&#xff0c;因此采用了docker部署的方式&#xff0c;进行各…

HTTP keepalive 详解

一、简介 HTTP协议早期版本&#xff0c;比如1.0&#xff0c;默认是不使用持久连接的&#xff0c;也就是每个请求/响应之后都会关闭TCP连接。这样的话&#xff0c;每次请求都需要重新建立连接&#xff0c;增加了延迟和资源消耗。Keep-Alive的作用是保持连接&#xff0c;让多个请…

长短期记忆神经网络(LSTM)基础学习与实例:预测序列的未来

目录 1. 前言 2. LSTM的基本原理 2.1 LSTM基本结构 2.2 LSTM的计算过程 3. LSTM实例&#xff1a;预测序列的未来 3.1 数据准备 3.2 模型构建 3.3 模型训练 3.4 模型预测 3.5 完整程序预测序列的未来 4. 总结 1. 前言 在深度学习领域&#xff0c;循环神经网络&…

基于机器学习的三国时期诸葛亮北伐失败因素量化分析

一、研究背景与方法论 1.1 历史问题的数据化挑战 三国时期&#xff08;220-280年&#xff09;的战争史存在史料分散、数据缺失的特点。本研究通过构建包含军事、经济、地理、政治四大维度的结构化数据库&#xff0c;收录建安十二年&#xff08;207年&#xff09;至建兴十二年…

蓝桥杯省模拟赛 数位和

问题描述 只能被 1 和本身整除的数称为质数。 请问在 1 &#xff08;含&#xff09;到 1000000 &#xff08;含&#xff09;中&#xff0c;有多少个质数的各个数位上的数字之和为 23 。 提示&#xff1a;599 就是这样一个质数&#xff0c;各个数位上的数字之和为 59923 。 #…

Timer的底层实现原理?

Timer 是 Java 中用于定时任务调度的基础工具类,其底层实现基于 单线程+任务队列 的模型。以下是 Timer 的底层实现原理的详细分析: 一、核心组件 TimerThread 继承自 Thread,是 Timer 的工作线程,负责从队列中提取任务并执行。通过 while (true) 循环持续检查任务队列。Ta…

Java 枚举类 Key-Value 映射的几种实现方式及最佳实践

Java 枚举类 Key-Value 映射的几种实现方式及最佳实践 前言 在 Java 开发中&#xff0c;枚举(Enum)是一种特殊的类&#xff0c;它能够定义一组固定的常量。在实际应用中&#xff0c;我们经常需要为枚举常量添加额外的属性&#xff0c;并实现 key-value 的映射关系。本文将详细…

青少年编程与数学 02-015 大学数学知识点 01课题、概要

青少年编程与数学 02-015 大学数学知识点 01课题、概要 一、线性代数二、概率论与数理统计三、微积分四、优化理论五、离散数学六、数值分析七、信息论 《青少年编程与数学》课程要求&#xff0c;在高中毕业前&#xff0c;尽量完成大部分大学数学知识的学习。一般可以通过线上课…

智能打印预约系统:微信小程序+SSM框架实战项目

微信小程序打印室预约系统&#xff0c;采用SSM&#xff08;SpringSpringMVCMyBatis&#xff09;经典框架组合。 一、系统核心功能详解 1. 智能化管理后台 ​用户数据看板​打印店资源管理​预约动态监控​服务评价系统 2. 微信小程序端 ​智能定位服务​预约时段选择​文件…

DataX 3.0 实战案例

第五章 实战案例 5.1. 案例一 5.1.1. 案例介绍 MySQL数据库中有两张表&#xff1a;用户表(users)&#xff0c;订单表(orders)。其中用户表中存储的是所有的用户的信息&#xff0c;订单表中存储的是所有的订单的信息。表结构如下&#xff1a; 用户表 users: id&#xff1a;用…

设计模式学习(1)

面向对象设计原则 单一职责 每个类只有一个职责&#xff0c;并被完整的封装在类中&#xff0c;该原则用来控制类的粒度。 例如Mapper&#xff0c;controller都只负责一个业务。 开闭原则 应该对扩展开放&#xff0c;而对修改封闭&#xff0c;例如定义接口或是抽象类作为抽…