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

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

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选择器总结_30个CSS3选择器

总结30个CSS3选择器:*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。

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

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

你需要知道的CSS 属性选择器!

属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的

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

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

css选择最后一个元素

如何用css选择器选择某元素下的最后一个子元素?这里我们需要使用CSS3中的:last-child 选择器,指定属于其父元素的最后一个子元素的 p 元素的背景色:

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

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

CSS中的focus-within伪类选择器

在CSS中 :focus-within 是一个伪类,CSS中伪类:focus-within能非常方便处理获取焦点状态, 当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。

Sass 选择器函数

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

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

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

巧用CSS属性值正则匹配选择器

这3种属性选择器是字符匹配,而非单词匹配。其中,尖角符号^、美元符号$以及星号*都是正则表达式中的特殊标识符,分别表示前匹配、后匹配和任意匹配。利用这些选择器,纯CSS就可以做出很炫酷的功能。

点击更多...

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