vue 选择器_实现scoped深度作用选择器

时间: 2018-10-29阅读: 3071标签: 选择器

vue项目中,当<style>标签有scoped属性时,它的 css 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,该如何实现呢?


1、对于css语法起作用

使用 >>> 操作符,代码如下:

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成: 

.a[data-v-f3f3eg9] .b { /* ... */ }


 2、对于scss这类的预处理器

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。代码如下:

.a{
  /* ... */
  /deep/ .b{
    /* ... */
  }
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1201

css怎么选择父元素下的某个元素?

css可以通过一些选择器来实现选择父元素下某个元素的效果。:first-child p:first-child(first第一个 child子元素)(找第一个子元素为p):last-child p:last-child(last倒数 child子元素)(找倒数第一个子元素为p)

了解CSS基本用法和选择器知识

相信做过网页的对Css都不是很陌生,它可以帮助我们重铸网页中很多绚丽的特效,尤其是现在Css已经发展3.0版本,很多功能更是丰富多彩,让我们的开发时间不仅大大缩短,而且还可以轻松做出许多华丽的特效,需要注意的是

CSS选择器:nth-child()和:nth-of-type()的使用

今天就讲一下css选择器:nth-child()和:nth-of-type()的使用。:nth-child()和:nth-of-type()的支持度,所有主流浏览器均支持:nth-child()和:nth-of-type()选择器,除了 IE8 及更早的版本。

CSS选择器及优先级

!important > 内联 > ID选择器 > 类选择器 > 标签选择器。优先级是由A、B、C、D的值来决定的,其中它们的值计算规则如下:如果存在内联样式,那么A = 1, 否则A = 0;B的值等于ID选择器出现的次数;

CSS选择器_伪元素选择器之处理父元素高度及外边距溢出

最小高度为100px的父元素,嵌套一个300px高度的子元素,当子元素浮动时,父元素高度并不随之升高。在某些特殊的条件下,为子元素设置上外边距时,有可能会作用到父元素上。

vue中能穿透组件的css选择器

如果父组件style设置了scoped,除了全局样式与子组件内部修改样式以外不受外部样式的影响,但要是父组件想修改子组件某个地方的样式但又不想为了这么一点变动去添加个全局样式该怎么做呢?

CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

CSS3 中有很多表示元素序号的选择器,有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

Sass 选择器函数

本节我们来看一下 Sass 中的选择器函数,选择器函数用于查看与处理选择器。selector-append() 函数用于将一个或多个选择器添加到第一个选择器的后面。selector-parse() 函数将字符串的选择符 selector 转换成选择器队列。

CSS选择器与CSS的继承,层叠和特殊性

.类选器名称{css样式代码;}这样的类选择器在css样式编码中是最常用到的,注意:1.英文圆点开头2.其中类选器名称可以任意起名(但不要起中文);除此之外,还有ID选择器,不过在很多方面,ID选择器都类似于类选择符

jQuery :eq() 选择器

:eq() 选择器选取带有指定 index 值的元素。 index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!