标签：__ el focus deep input 宽高比 八进制 选择器

2021.9.7

坑67（div、css、固定宽高比 ）：目标是使div元素在缩放时宽高比固定。因为 垂直方向上的内外边距使用百分比做单位时，是基于包含块的宽度来计算的。所以使用 padding-bottom实现宽高比固定的元素块。 实现：divBox实现固定宽高比，divContent则为其中内容，实现内容定位。

.divBox {
  /* 相对位置，定位基于该元素原先位置 */
  position: relative;
  /* 宽:高=4:3 */
  width: 40%;
  height: 0;
  padding-bottom: 30%;
}
.divContent {
  /* 绝对位置，定位基于父元素位置 */
  position: absolute;
  /* 充满父元素 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

参考： 面试官：CSS如何实现固定宽高比？ - 云+社区 - 腾讯云 (tencent.com) position - CSS（层叠样式表） | MDN (mozilla.org) 坑68（font-size、css、缩放 ）：目标是使字体大小随视口大小缩放。使用相对长度单位即可。例如，1vw=1%视口宽度。具体使用需依据情况选择合适单位。 参考：  CSS 单位 (w3school.com.cn) 关于css：基于容器宽度的字体缩放 | 码农家园 (codenong.com) 坑69（el-input、 el-input__inner:focus 、scoped、css ）：目标是改变el-input处于focus状态时的border颜色。检查页面元素发现是在.el-input__inner:focus中变更的。于是直接更改，代码如下：（style非scoped时可成功）

.el-input__inner:focus {
  border-color: #FF9505 !important;
}

但是毫无效果，检查页面元素可以看到该样式甚至没有被添加到元素中，也就是说选择器没有成功选到对应元素。 排查发现是因为 style使用了scoped，限制了样式渗透。需要使用深度选择器，这里使用了::v-deep（使用>>>和/deep/的话，均会标红），代码如下：

<style scoped>
::v-deep .el-input__inner:focus {
  border-color: #FF9505 !important;
}
</style>

可以成功达到效果，但提示编译器会提示如下：

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

表示::v-deep用法已被弃用，请使用 :deep（内部选择器）代替。 于是最终代码如下：

<style scoped>
:deep(.el-input__inner:focus)  {
  border-color: #FF9505 !important;
}
</style>

参考： 解决在Vue3.x中使用::v-deep .xxx出现警告的问题 - 锋旭 (snixu.com) vue中的css深度选择器 :deep(<inner-selector>)、/deep/、>>>、::v-deep 到底是什么？ - 掘金 (juejin.cn) rfcs/0023-scoped-styles-changes.md at master · vuejs/rfcs · GitHub  by尤雨溪   Vue style 深度作用选择器 >>> 与 /deep/（sass/less） - 贝尔塔猫 - 博客园 (cnblogs.com) Scoped CSS | Vue Loader (vuejs.org)   深度作用选择器 坑70（error、javaScript、 八进制 ）：运行时报错如下。

Octal literals are not allowed in strict mode.

表示 严格模式下不允许八进制字面量。这里不允许的写法是指 旧版的以0为前缀的八进制写法。所以Number不能有01、001、000.1这样不合日常数字的写法。而 新版的八进制写法是以0o为前缀，在javaScript中可以使用，例如0o77，对应十进制的63。 解决报错：将代码中的id=01，改为id=1。如果需要01，可以改用字符串。 参考： Legacy octal literals are not allowed in strict mode_九月萩的博客-CSDN博客

by 莫得感情踩坑机(限定)

标签：__,el,focus,deep,input,宽高比,八进制,选择器
来源： https://blog.csdn.net/Alloom/article/details/120162850

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。