z">id标签 class 在元素的属性里加上class标签，然后用”.class名称”选择所有具有相同class名称的元素。...h1> 分组和嵌套 分组 当多个元素有共同的css样式描述时可以使用分组减少代码，如： #a,#b,#c {color:blue;} text test text 嵌套 当要操作元素内部的子元素时可以使用嵌套来进行操作，如： div p {text-align:center;} div> name... div> 组合选择符 后代选取器 以空格分隔,选取改元素的所有后代，其实就是嵌套的选择的格式啦，如： div p {text-align:center;} div> div> name...FF00FF} a:active {color: #0000FF} first-child伪类 伪元素 first-line： 用于相文中首行设置样式，且只应用于块级元素，可设置的属性有： font
## */ 弟弟选择器（同级别的下面所有的标签） div~span{ color: red; } /* ######### 属性选择器 ########## */ 属性选择器 具有某个属性名...某个属性名及属性值 具有某个属性名及属性值某个标签 /*[hobby]找只要包含某个属性名的标签*/ [hobby]{ background-color: red; } [...hobby="jdb"]{ color="jdb"; } /*找具有属性名是hobby 并且值是 jdb的 input标签*/ input[hobby="jdb"]{ color: red...，后期再自己整理一下：CSS选择器完整参考手册 这里要放个表格，整理出来方便快速查找 CSS选择器优先级***** 参考：优先级是如何计算的？...样式调整技巧 先划分页面布局，搭出骨架再细节化 谷歌浏览器调整样式看页面效果
学习如何轻松构建可伸缩的 React 应用程序：样式 # 组件样式 在每个 Web 应用程序中，样式化非常重要，因为样式使其对用户非常有吸引力，并为用户提供良好的体验。...在 React 中有不同的方法来实现这一点。 # 样式化类型 在 React 和网站或 Web 应用程序中，有不同的样式化应用程序的方式。...# Sass Sass（Synthetically Awesome Style Sheet）是一种预处理器，具有扩展名 .scss，有一些很棒的功能，例如： Mixins（混入） Inheritance...这些内置样式和类已经默认具有响应式功能，因此您不必担心它们的响应式。...块（block）： 用于描述，通常由类表示 在第一眼看上去就告诉我们该类表示什么 div className="success">div> 块（block）有以下规则 块可以嵌套 可以有任意数量的嵌套级别
CSS (Cascading Style Sheets) 是用来样式化和排版你的网页的 —— 例如更改网页内容的字体、颜色、大小和间距，将内容分割成多列或者加入动画以及别的装饰型效果。...---- CSS是什么 CSS是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等。...保持不同类型代码的分离和纯净使处理该代码的任何人工作更为容易。 您唯一可能需要使用内联样式是当您的工作环境真的非常受限（也许您的CMS只允许您编辑 HTML 的 body）。...这种情况下，每一对括号必须逻辑上嵌套，跟嵌套 HTML 元素的标签嵌套方式相同。...同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。
什么是css 层叠样式表(英文全称：Cascading StyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。...CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。..., 如何层叠就由优先级来确定 优先级判断的三种方式 如果是间接选中, 那么就是谁离目标标签比较近就听谁的 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的 如果都是直接选中, 并且不是相同类型的选择器...如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高 标签理解 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级...容器级的标签中可以嵌套其它所有的标签 文本级的标签中只能嵌套文字/图片/超链接 容器级的标签 div h ul ol dl li dt dd ...
选择器 选择器用于选择文档中需要样式化的元素，通过不同的选择模式，告诉浏览器哪些元素应用哪些样式。 ID选择器（#） 通过元素的唯一ID来选择元素。...ID选择器应该确保在文档中是唯一的，不应重复使用相同的ID。 示例： #myID { /* 样式规则 */ } 类选择器（.） 通过元素的类名选择元素。...示例： h2 + p { /* 样式规则 */ } 后代选择器 选择某个元素下的所有后代元素。后代选择器会选择指定元素下的所有后代，包括嵌套层次深的元素。...示例： div p { /* 样式规则 */ } 并集选择器（,） 将多个选择器组合在一起，选择所有匹配任一选择器的元素。并集选择器用于同时选择多个不同类型的元素，并应用相同的样式规则。...遵循语义化： 使用具有语义化的选择器，以提高代码的可读性和维护性。
模块化： SCSS支持使用局部文件，将样式表分割为更小的模块。这有助于更好地组织和管理项目的样式，使代码更易读和维护。 可读性： SCSS的嵌套、变量和模块化等功能使样式表更易于阅读和理解。...SCSS允许你在样式表中使用变量、嵌套规则、混合（mixins）、函数、继承等功能，从而提供了更好的组织性、模块化和可读性。... div class="parent"> div class="child">div> div> 我们为这两个元素添加一些样式，并将它们嵌套在一起...$baseFontSize) * 1rem; } .text { font-size: px-to-rem(18px); } SCSS中的局部文件（Partials）如何工作 在SCSS中，局部文件是一种用于将样式代码模块化和组织化的技术...局部文件允许你将一个大的样式表分割成多个小的文件，以便更好地管理和维护代码。局部文件的文件名通常以一个下划线开头（例如 _partial.scss），并具有.scss扩展名。
CSS原生嵌套浏览器兼容性查看 来自 Web 开发者的呼声 2012年4月13日，CodePen 的联合创始人 Chris Coyier 抱怨 CSS 的类名不支持命名空间，导致要写好多重复的选择器。...开始使用CSS嵌套 在本文的其余部分，我们将使用以下演示沙箱来帮助您可视化所选择的内容。在默认状态下，没有选择任何内容，所有内容都可见。通过选择不同的形状和大小，您可以练习语法并查看其效果。...div class="circle pink">div> … div> 嵌套示例 CSS嵌套允许您在一个选择器的上下文中定义另一个选择器的样式。...&符号在这里非常有用，因为它明确显示了如何连接嵌套选择器。...它有助于减少代码重复、提高可读性，并提供更好的维护性和重构能力。 使用嵌套时，确保理解如何正确放置选择器和使用&符号来连接或附加选择器。此外，熟悉无效的嵌套示例，以避免错误。
本文将深入浅出地探讨三种基本CSS选择器——ID选择器、Class选择器、Tag（标签）选择器，分析它们的使用场景、常见问题、易错点以及如何避免这些问题，并提供实用的代码示例。 1. ...Tag选择器（标签选择器） 作用与特点 Tag选择器直接根据HTML元素的名称来选取元素，如p、div等。它是CSS中最简单且最通用的选择器，适用于给页面中所有同类型元素统一设置样式。...常见问题与避免策略 问题：样式过于泛化，影响特定元素。当对一个通用标签应用样式时，可能会无意中改变页面中所有该类型的元素。...避免：尽量减少使用Tag选择器，除非你想对页面中所有相同类型的元素应用相同的样式。对于需要特殊样式的元素，考虑使用更具体的选择器。...过多的嵌套和复合class选择器可能导致优先级混乱。 避免：尽量保持选择器简洁，合理使用组合选择器和伪类，避免不必要的权重增加。
3、通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式 div>这是一个div元素div> div>这是第二个div元素div> div> 的标签中再嵌套标签来表示列，标签的嵌套产生叠加效果。... 4、id选择器 通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。...-- 对应以上一条样式，其它元素不允许应用此样式 --> 这是第二个段落标签 样式，每个标签只能有唯一的id名 --> 这是第三个段落标签 样式，每个标签只能有唯一的id名 --> 5、伪类选择器 常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
给对应的元素添加class类名属性 class="自定义的类名" .box { font-size:25px; } div class...="box">内容div> 多标签选择器 一个元素可以拥有多个类名 类名和类名之间用空格隔开 多类名选择器可以让我们解决更复杂的一些需求 .red {..."box">id选择器div> 通配符选择器 选中任何元素，后期用于页面初始化。...样式表位置 内嵌式样式表 内嵌式样式表是在html里面嵌套一个style标签，将css语句都写在style标签里面 css语句 外链式样式表 单独创建一个后缀名为...比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
，最终有效的就是text的颜色为blue的那条规则，这就是全局样式覆盖，同理，这在js中也同样存在，因此就引入了模块化，在js中可以用立即执行函数表达式来隔离出不同的模块 var moduleA = (...的渲染规则可以参看这篇文章探究 CSS 解析原理 会带来代码的冗余 由于CSS不能使用类似于js的模块化的功能，可能你在一个css文件中写了一个公共的样式类，而你在另外一个css也需要这样一个样式，这时候...BEM解决了模块复用、全局命名冲突等问题，配合预处理CSS使用时，也能得到一定程度的扩展，但是它依然有它的问题： 对于嵌套过深的层次在命名上会给需要语义化体现的元素造成很大的困难 对于多人协作上，需要统一命名规范...模块化 可以使用composes来引入自身模块中的样式以及另一个模块的样式： .serif-font { font-family: Georgia, serif; } .display { composes...，因此确保了类名的唯一性，我们再看看浏览器中inspector中的样式应用，如下： ?
类选择器命名规则 不能用纯数字或者数字开头来定义类名 不能使用特殊符号或者特殊符号开头（_ 除外）来定义类名 不建议使用汉字来定义类名 不推荐使用属性或者属性的值来定义类名 常用的命名 ?...如何找到某一字体相对应的unicode编码呢？ 第一步：f12 第二步：找到console 第三步：输入escape(“宋体”) 注意英文的括号和双引号。 ?...href=”1.css”> // 写在head里 行内样式表 div style="font-size: 30px; color:red;">行内样式表div> 三种写法特点: 内嵌式写法，...2.不脱标，其他的元素不能占有其原来的位置。 3.子绝父相（父元素相对定位，子元素绝对定位），用的最多的场景。 4.行内元素使用相对定位不能转行内块元素。...：子绝父相，然后子盒子先往右走父盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
vue3 侦听器 在Vue3中，侦听器的使用方式与Vue2相同，可以使用watch选项或$watch方法来创建侦听器。...不同之处在于，Vue3中取消了immediate选项，同时提供了新的选项和API。 创建侦听器 可以使用watch选项或$watch方法来创建侦听器，语法与Vue2相同。...样式 在Vue3中，推荐使用CSS Modules和CSS Variables来实现组件样式。CSS Modules可以避免全局样式的污染，而CSS Variables可以实现更灵活的样式控制。...需要注意的是，使用CSS Modules时，类名会被自动转换为唯一的类名，可以通过$style来引用。...vue3 组件嵌套关系 在Vue3中，组件嵌套关系与Vue2中的组件嵌套关系相同，通过在模板中嵌套组件来实现。 例如，有两个组件Parent和Child，其中Parent组件中嵌套了Child组件。
原子化 CSS 是一个 CSS 框架， 在没有对应的 CSS 框架的项目中，是如何写 CSS 的。...在例子中的 6 个样式规则中，4 个是基于上下文的 新的需求与原有规则冲突，需要修改一个其中一个样式，是通过新增一个嵌套类覆盖原有的样式 虽然文中的代码样例是 2013 年的，9 年过去了，发现自身的老项目中还是存在着类似问题...按照业务声明类名:比如字符过长省略的样式。多出重复。但是按照业务来命名 CSS 类又避免不了这个问题。...CSS 原子化是如何解决这些问题的 首先我们看看前文中提到组件使用 CSS 原子化是如何实现的，项目中已引入 winidicss。...没有了命名的烦恼，按照功能命名 没有相关嵌套，整体可读性加强 没有重复 CSS 类， 一个功能对应一个类名，一个类名一个功能。没有重复 没有新增 CSS 文件了。
语法为： 名1="属性值1" 属性名2="属性值2"> 由于很多属性可用CSS或JS替代，此处了解常用属性即可，不同标签具有的属性也不同。 2....CSS CSS即层叠样式表，是美化网页的语言，简单易懂。 CSS用于定义网站的样式和动画，文件名后缀为.css。... div { color: red; } 内联样式 在要应用样式的标签中，添加style属性，仅对当前标签有效：...div style="color: red;">容器div> 2.2 选择器 网页中有那么多的标签，如何给指定的标签应用样式呢？...通常用于初始化一个页面，为所有元素清除浏览器自带的默认样式。
如何才能更好，更优雅的去解决这些命名问题呢？在这之前，先随我看一些不合适的命名示例吧。...项目名称、文件名称 项目或者单文件的命名方面，常见规则： kebab-case：横短线命名，也叫串式命名法，小写字母的词组，中间加 - 拼接的方式，这种方式命名便于同类内容快速查找 // good news-index...Block：一般可以看做是独立具有实际意义的模块部分，例如 header,container,menu 等 Element：组成 Block 的一部分，没有具体的实际意义，一般也不独立使用，例如 menu...Block 与 Element 之间连接是通过 __ 双下划线，Block，Element 与 Modifier 之间是通过 -- 双中划线进行连接，当使用less或者 sass 语法编写 css 时，通过嵌套语法也能够很简洁的书写这部分样式...color: #666; &--disabled: { color: #f00; } } } BEM 命名规范可以让样式的命名更加模块化，组件之间结构独立，减少了命名之间的冲突
本文就将介绍CSS模块化的诸多优点，以及如何编写模块化的CSS。...由于类名需要默认具有局部作用域，这就涉及到一些初始设置、一个编译过程，以及其他一些难以琢磨的东西。...但是类名并不要求一定要长的好看对不对？只要可以将样式正确的应用于元素就可以了嘛。而CSS模块化方法完成的非常好，所以我觉得，这不是一个问题。...但这是因为模块将CSS样式和组件相绑定，从而不会发生全局样式的冲突。这其实是一件好事，我相信你也会同意的对不对。 另一方面，要定义全局样式也是可以的，只要使用:global()就好了。...CSS统一的名空间使得它既强大又脆弱。而CSS模块化或者未来延续这个思想的其他工具可以在支持样式复用的同时，避免命名冲突，这是一个双赢的选择。
1.3、引入CSS 上面我们说了CSS的那么多好处，那么我们应该如何引入CSS呢？...样式属性和值中间是:。 多组属性值之间用;隔开。 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。 没有实现样式和结构相分离（致命的缺点）。...标签 2.2.1.4、优缺点 优点： 是能快速为页面中同类型的标签统一样式 缺点： 不能设计差异化样式。...div class="font14">貂蝉div> 2.2.2.3、优点 可以为元素对象定义单独或相同的样式。...2.3.1.2、注意 当标签发生嵌套时，内层标签就成为外层标签的后代。 子孙后代都可以这么选择，或者说，它能选择任何包含在内的标签。
这样做的好处就是 见名知意，通过组件的名称我们就可以知晓该页面使用了何种布局 布局样式和组件内部样式进行分割 统一管理 然后，它背后用的技术就是我们在CSS-in-JS。...我们能所学到的知识点 ❝ 初始化项目 基本用法 使用 Props 扩展样式 嵌套样式 扩展 React 组件 CSS变量 添加主题 处理动画 使用 as 属性 默认属性 ❞ ❝Styled-components...下面，我们就来学习一下它是如何工作的。 2....嵌套样式 当然，现在的前端样式已经不满足之前介绍的针对单个元素的样式封装。我们还可以拥有像less/scss一样的样式嵌套。这样我们就可以在一个样式逻辑种处理其内部的多个子元素。实现更好的封装。...*/ 目标化根元素 除了 HTML 外，CSS 还可以用于样式化其他类型的文档。这就是 :root 元素发挥作用的地方，它允许你样式化文档的根元素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
