CSS使用样式穿透的多种方法
<p>通常在引入第三方 UI 组件库（如 element-ui或者easyUI等等），需要自定义组件样式时，但由于样式使用了 scoped 属性（为避免组件之间的样式相互影响），导致无法直接覆盖原组件的样式，这时就需要用到样式穿透<strong>。</strong></p><p>CSS使用样式穿透的方法有以下几种：</p>
<p>1、使用 <code>>>></code>符号：</p>
<div class="jb51code"><pre class="brush:css;">.container >>> .el-input__inner {
width: 160px;
}</pre></div>
<p> 该方法适用的样式语法：css、stylus</p>
<p>2、使用 <code>/deep/</code>：</p>
<div class="jb51code"><pre class="brush:css;">.container /deep/ .el-input__inner {
width: 160px;
}</pre></div>
<p>该方法适用的样式语法：sass、scss、less</p>
<p>3、使用 <code>::v-deep</code>：</p>
<div class="jb51code"><pre class="brush:css;">::v-deep .el-input__inner {
width: 160px;
}</pre></div>
<p> 该方法对所有样式语法通用，即适用于 css、stylus、sass、scss 和 less</p>
<p>其中<code>/deep/</code> 和 <code>::v-deep</code> 属于<strong>深度选择器</strong>。</p>
頁:
[1]