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

更新日期: 2019-11-28 阅读: 3.6k 标签: 选择器

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

这种情况可以使用带穿透功能的css选择器 >>>,如:

<style scoped>
.nav >>> .component{
  color: #f1f1f1;
}
>>> .component{
  color: #fff;
}
</style>

与其作用相同的还有深度作用选择器/deep/

<style scoped>
.nav /deep/ .component{
  color: #f1f1f1;
}
/deep/ .component{
  color: #fff;
}

</style>


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/6686

相关推荐

css兄弟选择器(+ 和 ~)的使用和区别

这篇文章主要讲解css中兄弟选择器的使用,以及+和~的区别有哪些?+ 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。 ~ 选择器:作用是查找某一个指定元素的后面的所有兄弟结点。

jQuery :eq() 选择器

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

css节点选择器

基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:ID选择器,标签选择器,类选择器,属性选择器,通配选择器

CSS3 target 选择器_:target伪类的使用

arget作为目标伪类选择器,是css3中的新特性之一。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。

jquery的选择器有哪些?如何对元素取值和设置值

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作, Jquery 选择器包括:基本选择器、层叠选择器 、基本过滤选择器 、内容过滤选择器、可视化过滤选择器.....

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

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

css 选择器符号

空格:后代选择器,表示div元素里面所有的p元素。> 子选择器:表示div元素里面所有的子代(不含孙代及以后)p元素,~兄弟元素选择器:表示.cls元素往后的同级的p元素

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

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

CSS中的focus-within伪类选择器

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

css选择最后一个元素

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

点击更多...

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