css修改父组件样式,子组件修改父组件样式

有办法去掉从父级元素继承下来的 CSS 样式吗

在div里给它加上一个类，给新加的类写样式。

在CSS中，继承是一种非常自然的行为，我们甚至不需要考虑是否能够这样去做，但是继承也有其局限性。

首先，有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的。举个例子来说：border属性，大家都知道，border属性是用来设置元素的边框的，它就没有继承性。如下图所示，如果继承了边框属性，那么文档看起来就会很奇怪，除非采取另外的措施关掉边框的继承属性。

多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。

扩展资料

CSS中的样式覆盖原则：

规则一：由于继承而发生样式冲突时，最近祖先获胜（最近原则）。

strong分别从body和p中继承了color属性，但是由于p在继承树上离strong更近，因此strong中的文字最终继承p的蓝色。

规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜（最直接原则）。

strong {color:red;}

那么根据规则二，strong中的文字最终显示为红色。

规则三：直接指定的样式发生冲突时，样式权值高者获胜。

样式的权值取决于样式的选择器，权值定义如下表。

css选择器 权值

标签选择器 1

类选择器 10

ID选择器 100

内联样式 1000

伪元素(:first-child等) 1

伪类(:link等) 10

可以看到，内联样式的权值ID选择器类选择器标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。

相关问答

Q1: 如何更改CSS属性，取消对父级元素的属性继承？

在div里给它加上一个类，给新加的类写样式。

继承在CSS中是一种自然的行为，我们甚至不需要考虑是否可以这样做，但它有其局限性。

首先，有些属性不能被继承。这是没有原因的，因为它是这样建立的。例如，您都知道，border属性用于设置元素的边界，因此它没有继承。

如下图所示，如果继承了border属性，那么文档将看起来很奇怪，除非您采取其他措施来关闭border的继承属性。大多数边框属性，如填充、空白、背景和边框，都不是继承的。

扩展资料：

CSS中的样式优先原则：

规则1：当由于继承而发生样式冲突时，最近的祖先获胜（最近的原则）。

Strong分别从body和p继承了color属性，但是因为p在继承树中更接近Strong，所以Strong中的文本最终继承了p的蓝色。

规则2：当继承的样式与直接指定的样式冲突时，直接指定的样式获胜（最直接的原则）。

强大的｛颜色：红色；｝

根据规则二，用strong表示的文本以红色结尾。

规则3：当直接指定的样式冲突时，具有最高样式权重的样式将获胜。

该值取决于样式的选择，权重定义见下表。

CSS选择器的重量

标签选择器1

类选择器10

ID选择器100

内联样式1000

伪元素（：第一个子元素，等等

伪类（：链接等

可以看到，行内样式的权重是、ID选择器、、b类选择器、、标签选择器，除了子类选择器外，权重是每个权重的和，比如“# nav”。电流a“重100 + 10 + 1 = 111”。

Q2: vue里面父组件修改子组件样式的方法

在使用

vue

的开发中，我们有时会引用外部组件，包括

UI

组件（ElementUI、iview）。

当

style

标签有

scoped

属性时，它的

CSS

只作用于当前组件中的元素。

但是在父组件中添加

scoped

之后，父组件的样式将不会渗透到子组件中，所以在父组件中书写子组件的样式是无效果的。

一、去掉

scoped

在父组件的

style

中去掉

scoped

后，父组件中可以书写子组件的样式，但是你会担心这样会污染全局样式。

【因为我们知道正确使用全局样式的姿势是使用一个全局的

app.css】

二、混用本地和全局样式

你可以在一个组件中同时使用有作用域和无作用域的样式：

style

/*

全局样式

*/

/style

style

scoped

/*

本地样式

*/

/style

我们把

需要修改子组件的样式

写在上面那个全局样式里面

三、使用深度作用选择器

如果你希望

scoped

样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用

操作符：

style

scoped

.a

.b

{

/*

...

*/

}

/style

有些像

SASS

之类的预处理器无法正确解析

。这种情况下你可以用

/deep/

操作符取而代之

——

这是一个

的别名，同样可以正常工作。

OK，主要内容就是以上几点。

需要额外补充的是：

1、通过

v-html

创建的

DOM

内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式

2、CSS

作用域不能代替

class

3、在递归组件中小心使用后代选择器

以上这篇vue里面父组件修改子组件样式的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue中element组件样式修改无效的解决方法浅谈vue中改elementUI默认样式引发的static与assets的区别Vue修改mint-ui默认样式的方法