解决方案 这里有两个方案，使用rgba()间接的设定opacity的值，这个属性不会向下继承，或者既然opacity会被子级元素继承，那就把opacity属性放到同级元素实现，下面通过示例具体说说这两种方式...background: red; color: black; } 子元素会继承父级元素的...opacity属性 子元素会继承父级元素的opacity属性 2.把opacity属性放到同级元素实现...background: red; color: black; } 子元素会继承父级元素的...opacity属性 子元素会继承父级元素的
问题 css3中的opacity属性是用来设置 div 元素的不透明级别的，但是我们往往会遇到因为父级元素设定opacity后，子元素也跟着透明了，但是有时候我们只是想让背景是透明的，这该如何解决呢？...background: red; color: black; } 子元素会继承父级元素的...opacity属性 子元素会继承父级元素的opacity属性 这样我们得到的是无效的：...background: red; color: black; } 子元素会继承父级元素的...opacity属性 子元素会继承父级元素的opacity属性 效果如下： 发布者：全栈程序员栈长
，但目的是让其变得更易用，提高可扩展性和灵活度，如果只是为了修饰而修饰，写出大量没有任何复用性的类，便是一种弄巧成拙的做法。...BEMCSS BEM 分别代表着：Block（块）、Element（元素/子块/组成部分）、Modifier（修饰符），是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出。...Element（元素） 是块中的组成部分，对应块中的子元素/子节点。...块的内部元素，都被认为是块的子元素。一个块中元素的类名必须用父级块的名称作为前缀，因此不能写成：block__elem1__elem2。...个人建议可以尝试使用 BEM 规范来书写代码。 BEM 命名会使得 Class 类名变长，但经过 GZIP 等压缩后，文件的体积其实并无太大影响。
BEM的方式最简单，class都唯一了，那还冲突个毛线；其次就是通过父元素限定作用域，可以搞几个层级，而不是单独一个class定义样式；还有就是追加class，来实现差异化；最后不同的页面不同的文件，你用你的我用我的...// BEM.imgslide__item__img{} // 父元素限定.imgslide .item .img{} // 追加class.img{}.img--special{} // 不同页面不同文件...第三种办法：使用父类，给一个范围，于是形成 .page-user.page-tt。 一般我们使用的是第二种和第三种办法，因为这两种都有共同的 .page-tt，可以比较方便控制一些基础共有的样式。...a.field-img-link>img.field-img h3.field-tt>a.field-tt-link p.field-text 由上可以看出继承式一般子元素接着父元素的最后一个单词如...，至于 .aside-block与它的子元素之间则使用了我们上面说的继承式层级。
BEM的方式最简单，class都唯一了，那还冲突个毛线；其次就是通过父元素限定作用域，可以搞几个层级，而不是单独一个class定义样式；还有就是追加class，来实现差异化；最后不同的页面不同的文件，你用你的我用我的...// BEM .imgslide__item__img{} // 父元素限定 .imgslide .item .img{} // 追加class .img{} .img--special{} //...第三种办法： 使用父类，给一个范围，于是形成.page-user .page-tt。 一般我们使用的是第二种和第三种办法，因为这两种都有共同的.page-tt，可以比较方便控制一些基础共有的样式。...a.field-img-link>img.field-img h3.field-tt>a.field-tt-link p.field-text 由上可以看出继承式一般子元素接着父元素的最后一个单词如...class，而.block-tt,block-bd则使用了我们的修饰关键词，至于.aside-block与它的子元素之间则使用了我们上面说的继承式层级。
父节点的类名是 stream ，内容是一个文章列表。它的子节点的类名是 streamItem ，内容是文章列表中的一篇具体的文章。这使我们很容易的了解到父节点和子节点之间的关系。...使用组件的思想将会使你的代码解耦。解耦的代码越多，你的类之间的依赖就越低。这会让你的代码更容易修改，并且使你的代码更长时间的工作下去而不用修改它。...BEM 代表块(block)、元素（element）和修饰符（modifier）。Yandex，在俄罗斯的相当于谷歌的搜索引擎，为了解决他们 CSS 代码库中的缩放问题而提出了它（它指BEM）。...splash 这个类不但包含了本身的样式和逻辑，同时也包含了它的子节点的。为了解决这个问题，我们可以将这段代码分离为两个新的类。...我们可以将 splash 作为一个一般的全屏类，它可以拥有任何子节点。所有子节点关注的属性，都在 splash content 中，与父节点的属性是完全解耦的。
在 BEM 中，块被写为像 class 的名字一样，如下所示： ? BEM 使用 .form 而不是 元素的原因是因为 类允许无限的可重用性，而即使是最基本的元素也可能改变样式。...如果设置了一个 .button 类的按钮，则可以在任何 元素上选择是否使用 .button 类。...很具有讽刺意味，但是这个丑陋的语法让我的代码更简洁，更易于维护。所以强烈推荐你尝试它:) 我们来看看 BEM 的第三个重要部分 —— 元素。 元素(Elements) 元素是块的子节点。...BEM 元素有两个优点 ： 你可以让 CSS 的优先级保持相对扁平。 你能立即知道哪些东西是一个子元素。 为了解释以上两点，考虑使用两个单独的 class 的替代方法（许多框架这么做的）。...他们是： 只把子子元素链接到有意义的块 创建新的块来保存元素 链接孙元素到块 虽然 BEM 建议你将 BEM 元素写作 .block__element ，但它不会规定你的 HTML 应如何。
现在（从css渗漏的角度）这就变得好理解了，那些基本排版、文本输入框以及全局继承的样式就显得合理了。这是HTML和CSS为何被开诚布公的、公用化地创造出来。...同样，可以在父元素内的子元素中独立定义样式 - 这并不会受到你在前一阶段Sass这层已经定义好的样式的影响。...规则3: 构建组件时用边界元法（BEM）命名 尽可能试着用BEM命名去创建独立的组件，我们不必完全按照BEM的规范 - 只是用命名组合，这意味着类名以如下的方式命名： .block__element--...这允许我们仅可以修改在特定块（block）级别的修饰符， 并且在子块中不能重复修饰符（可以理解为父子嵌套时不重名；“E”在BEM中即元素elements）。...为了更好的理解BEM体系，可以转向这里 - 由Harry Roberts写的CSS指南 ：BEM形式的命名。
这些 head、feet 和 arms 都是组件中的元素。它们可视作子组件（child components），也就是父组件的组成部分。...如果使用 BEM 命名规范的话，这些元素的类名都可以通过在两条下划线后加上元素名称来产生。...如果使用 BEM 的话，这些修饰符的类名都可以通过在两条连字符后加上元素名来产生。...假如我们这个火柴人拥有另一个不一样的头部大小呢？ 一次元素被加上了修饰符。记住，元素指一个整体封装区块中的一个子组件。...能正确命名 CSS 中的类名可以让你的代码变得更易理解和维护。 如果你选择 BEM 命名规范，在看标记语言（markup）时就更容易看清各个设计组件/区块之间的关系。 感觉不错吧？
场景二：承接上文，由于页面和弹窗样式冲突了，所以把页面的冲突样式的选择器加上一些结构逻辑，比如子选择器、标签选择器，借此让选择器独一无二。...这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。...除非使用BEM让代码增加了不必要的维护困难，或者这么做确实让代码更难读了，那么你在使用它之前就要三思而行了。...当我们遵循了这个规定，无论父元素名发生改变，或是模块构造发生的改变，还是元素之间层级关系互相变动，这些都不会影响元素的名字。...如果我们用的是BEM，要覆盖样式很简单：找到要覆盖样式的元素，得知它的类名，在媒体查询中，用它的类名作为选择器，写下覆盖样式，样式就覆盖成功了，不需要担心前面样式的权重过大。
，那么这个块级元素的margin-top值会传递给父元素 margin-bottom传递:当块级元素的底部线和父元素的底部线重叠，那么这个块级元素的margin-bottom值会传递给父元素 折叠:...事实上现在很多的网站对于列表元素没有很强烈的偏好,更加不拘一格,按照自己的风格来布局: 原因是列表元素默认的CSS样式, 让它用起来不是非常方便; 比如列表元素往往有很多的限制, ul/ol中只能存放...) 属性(id属性、class属性、普通属性) {}(内容) $(数字) 隐式标签 CSS Emmet 结构伪类 - :nth-child :nth-child(1) 是父元素中的第1个子元素...0 是父元素中的第奇数个子元素(第1、3、5、7……个) 跟:nth-child(odd)同义 nth-child(-n + 2) 代表前2个子元素 结构伪类 - :nth-last-child( )...(1) :last-of-type，等同于:nth-last-of-type(1) :only-child，是父元素中唯一的子元素 :only-of-type，是父元素中唯一的这种类型的子元素 下面的伪类偶尔会使用
学习内容: CSS的引用方式: 行内样式表/内部样式表/外部样式表 Emmet语法; (一)复合选择器: 后代选择器/子选择器 (二)伪类选择器; 链接伪类选择器 CSS的引用方式 1.行内样式表(行内式...常用的复合选择器包括:后代选择器,子选择器,并集选择器,伪类选择器等等. 1.后代选择器(重要) 后代选择器又称为包含选择器,可以选择父元素里面的子元素.其写法就是把外层标签写在前面,内层标签写在后面...语法: 元素1 元素2 {样式声明} 上述语法表示选择元素1里面的所有元素1(后代元素) 例如: ul li {样式声明} 元素1和元素2中间用空格隔开 元素1是父级,元素2是子级,最终选择的是元素...语法: 元素1 > 元素2 {样式声明} 元素1和元素2之间用大于号隔开 元素1是父级,元素2是子级,最终选择的是元素2. 3.并集选择器 并集选择器可以选择多组标签,同时为他们定义相同的样式.通常用于集体声明...,他只会选择离他最近的子元素的标签,在这里,有大肘子的a标签就是div最近的子标签,所以要用子选择器.
解决方案： 在写样式的时候，要充分利用样式继承（当然了前提是你能hold住这个样式而不被反覆盖），避免重复定义样式。...场景1：子元素margin没有撑开父容器，但影响到相邻元素，从而影响距离计算。 这就是著名的BFC边距折叠问题，具体原理我就不阐述了，各位自行查资料。为什么要把这个问题拿出来说？...举例如下图，父容器a其实没有margin，但子元素c的边距使得a与b之间产生了间距，这并不是我们预期的： 我们希望看到的标准输出应该如下图： 解决方案： 原理上就是要解决BFC折叠问题，一般来讲，我们可以用这两种方法解决...父元素添加overflow:hidden，但前提是该容器内没有需要“溢出容器”的内容，比如小箭头什么的。 2. 给父元素增加伪元素:after，并设置其display:table。...那照这个原理来讲，我们人为让img做底部对齐不就可以了？是的，设置verticle-align:bottom就能解决。 但是我在这里想分享另一个思路，img标签，最好使用一个父容器存放！
交集选择器：如果有标签选择器，标签选择器必须写在最前面 hover伪类：鼠标悬停在元素上的状态，设置样式 ---- Emmet语法：通过简写语法，快速生成代码 HTML篇： 快速生成标签带有类名的标签...：inline 行内块元素 display：inline-block 元素显示模式转换 改变元素默认的显示特点，让元素符合布局要求 ①块级元素：display：block 独占一行（一行只能显示一个...） 可以设置宽度和高度 默认宽度是父元素的宽度，默认高度是内容高度 注意：p和h里不能放块元素 代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…...注意点： p标签不要嵌套div、p、h等块级元素 a标签可嵌套任意元素，但a标签不能嵌套a ---- CSS 三大特性： 1️⃣继承性: 子元素有默认继承父元素样式的特点（子承父业） 可通过调试工具判断样式是否可继承...，才能通过层叠性判断结果 3️⃣优先级： 不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式 优先级公式：继承 类选择器 < id选择器 <
向 子组件 传递数据时，通过 在子组件上动态绑定传值，然后在子组件中，通过Prop 来接收使用即可。...一般我们会直接在Prop 直接接收父组件动态绑定的key，没有类型约束，这样父组件传递任何类型数据都可以，这就存在一定的缺陷了。...官方提供了3中解决方案 scoped Style 中加入 scoped 使用CSS Modules 来设定CSS 作用域` 基于 class 的类似 BEM的策略 // 1, scoped ...第二种方式 components/ |- MyComponent.vue 基础组件命名 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base...在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
E{foo} 代表标签包含的内容是foo。 E>N 代表N是E的子元素。 E+N 代表N是E的同级元素。 E^N 代表N是E的上级元素。...Emmet没有一组可用的标签名称，可以写任何单词并将其转换为标签。也就是只要知道元素的缩写,Emmet会自动转换成对应标签....div#pageId+div.child => 父级:^ ^用于生成父级元素的同级元素,从这个^字符所在位置开始...,查找左侧最近的元素的父级元素并生成其兄弟级元素.....比如这个例子,如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级. div>(ul>li+span)>a => </li
module 这个没用过，也没有去弄个demo，大致意思就是可以自己定义编译的规则，把类名编译成只对当前组件有效的字符串，可以是hash字符，也可以是带组件名类名加hash字符串，最终就是得到唯一的类名...，BEM由块（Block）、元素（Element）、修饰符（Modifier）组成，块__元素--修饰符： B:block,对应模块名，如dialog E:element 对应模块中的节点，如button...scoped：做到了样式隔离在内部，但是会被外部或者子组件被父组件污染，或者得用deep进行穿透，如果dom特别多的情况下，data-v-hash会稍微导致页面渲染性能。...module：通过类名，做到了绝对隔离，但又因为绝对隔离，修改样式或者复用又变得困难。 BEM：隔离和污染做的很好，但是名字太长长，命名困难，多人协作的情况下通过人为约定约束实现BEM太过困难。...在我看来，scoped > module > BEM，引用工具来约束和人为约束肯定是选择使用工具去约束，module和scoped对比，也只是工具对类名的不同处理。
开始喽 CSS特性 优简代码/定位问题，并解决问题 继承性 层叠性 优先级 继承性 子级默认继承父级的文字控制属性 注意 标签自己有样式，则生效自己的样式，不继承 层叠性 特点 相同的属性会覆盖...规则 选择器优先级高的样式生效 公式 通配符选择器类选择器<id选择器<行内样式<!...important 注意 选中标签的范围越大，优先级越低 叠加计算 如果是符合选择器，则需要权重叠加计算 公式（每以及之间不存在进位） 行内样式 ，id选择器个数，类选择器个数，标签选择器个数 规则 1...important权重最高 2、继承权重最低 Emmet写法分析 代码的简写方式，输入缩写 VScode会自动生成对应的代码 HTML CSS：大多数简写方式为属性单词的首字母 背景图 网页中...）的显示方式 作用 布局网页的时候，根据标签的显示模式选择合适的标签摆放内容 块级元素 位置 独占一行 宽度默认是父级的1000% 添加宽高属性生效 行内元素 位置 一行共存多个 尺寸 尺寸由内容撑开
并且，像这样的样式定义会应用到父元素内部的任何元素上——而不仅仅是你写在Sass里的那个层级。 对CSS选择器嵌套你所做的是用 微妙 和 脆弱的方式绑定CSS和HTML结构。...法则三：采用BEM命名来开发组件 在构建可隔离组件时，尽可能采用BEM命名方案给类命名。...Sass嵌套为我们创建BEM类名。...这就允许我们只要指定区块的修饰符——也就是正在编辑的内容—— 不用在区块内的所有子元素上重复修饰符（BEM中的E）。...为了更好地理解类似BEM的命名方式，前往查看Harry Roberts的CSS指南的类BEM命名部分。（需要提到的是，我们发现Harry实际上建立了一套跟我们类似的命名方案。）
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
