我如何知道什么改变了我的css值?

时间:2021-10-13 20:22:46

I am a newbie (very much so), so my question might be dumb, but I couldn't find the answer.

我是一个新手(非常喜欢),所以我的问题可能很愚蠢,但我找不到答案。

For a contact table on a webpage I have set the height of 30px, but when I look at it in Google Developer tools, the height value is crossed out. I've tried to find out what causes my value to be overriden, but no luck. The developer tools shows that the value is overriden, but it doesn't show where.

对于网页上的联系人表,我设置了30px的高度,但是当我在谷歌开发工具中查看时,高度值被划掉了。我试着找出是什么原因使我的价值被高估,但没有运气。开发人员工具显示值为overriden,但不显示在何处。

So, the question is: How do I find what overrides my values in CSS?

所以,问题是:如何找到在CSS中覆盖我的值的东西?

3 个解决方案

#1


4  

In Chrome, your styles will inherit from any parent styles - either in the same style sheet or, if you have any, in other attached style sheets.

在Chrome中,您的样式将继承自任何父样式——要么在相同的样式表中,要么在其他附加的样式表中(如果有的话)。

When a style inherits attributes either from parent elements or other classes, its predecessors will be listed in the Style Browser*, listed from nearest styles to most distant. So for example, if you have a paragraph that has a class assigned to it, but that paragraph is contained within a parent div that also has its own styles, your Style Browser will show the class name of that paragraph at the top (including all the class attributes), followed by the div's classes and so on up your DOM.

当一个样式从父元素或其他类继承属性时,它的前身将在样式浏览器*中列出,从最近的样式到最遥远的样式。举个例子,如果你有一段话类分配给它,但这段包含在父div,也有自己的风格,你的风格浏览器将显示类名的段落在顶部(包括所有的类属性),其次是div的DOM类等等。

To discover which style is overriding your height value, scroll down through the Style Browser until you find a height attribute that isn't crossed out. You will also see the style sheet (including the line number) that contains the style that is affecting your page's appearance.

要发现哪个样式重写了高度值,请在样式浏览器中向下滚动,直到找到没有划掉的高度属性。您还将看到样式表(包括行号),其中包含影响页面外观的样式。

*You can open the style browser by right-clicking within a web page and selecting "Inspect Element".

*您可以在网页内右键单击并选择“Inspect Element”来打开样式浏览器。

我如何知道什么改变了我的css值?

#2


3  

You have to read the styles from the bottom going up.

你必须从下往上读样式。

You should find your CSS rule for the table in the styles section. Going up from that point you should be able to see which are the modifications that override your rule and display the element as depicted in the "Computed style" section.

您应该在样式部分中找到您的CSS规则。从这一点开始,您应该能够看到哪些修改覆盖了您的规则,并显示“Computed style”部分中描述的元素。

If you dont find anything please give a look to your inline styles.

如果你没有找到任何东西,请看看你的内联风格。

It would be easier to explain if I can look at some sample code...

如果我能看一些示例代码,就更容易解释了……

#3


1  

The applied style is shown in the top and then the overridden ones are shown crossed out as you scroll down. So, the overridden value should be somewhere above the one which has been crossed out.

应用的样式显示在顶部,然后在向下滚动时显示被覆盖的样式。因此,被重写的值应该位于已被删除的值之上。

#1


4  

In Chrome, your styles will inherit from any parent styles - either in the same style sheet or, if you have any, in other attached style sheets.

在Chrome中,您的样式将继承自任何父样式——要么在相同的样式表中,要么在其他附加的样式表中(如果有的话)。

When a style inherits attributes either from parent elements or other classes, its predecessors will be listed in the Style Browser*, listed from nearest styles to most distant. So for example, if you have a paragraph that has a class assigned to it, but that paragraph is contained within a parent div that also has its own styles, your Style Browser will show the class name of that paragraph at the top (including all the class attributes), followed by the div's classes and so on up your DOM.

当一个样式从父元素或其他类继承属性时,它的前身将在样式浏览器*中列出,从最近的样式到最遥远的样式。举个例子,如果你有一段话类分配给它,但这段包含在父div,也有自己的风格,你的风格浏览器将显示类名的段落在顶部(包括所有的类属性),其次是div的DOM类等等。

To discover which style is overriding your height value, scroll down through the Style Browser until you find a height attribute that isn't crossed out. You will also see the style sheet (including the line number) that contains the style that is affecting your page's appearance.

要发现哪个样式重写了高度值,请在样式浏览器中向下滚动,直到找到没有划掉的高度属性。您还将看到样式表(包括行号),其中包含影响页面外观的样式。

*You can open the style browser by right-clicking within a web page and selecting "Inspect Element".

*您可以在网页内右键单击并选择“Inspect Element”来打开样式浏览器。

我如何知道什么改变了我的css值?

#2


3  

You have to read the styles from the bottom going up.

你必须从下往上读样式。

You should find your CSS rule for the table in the styles section. Going up from that point you should be able to see which are the modifications that override your rule and display the element as depicted in the "Computed style" section.

您应该在样式部分中找到您的CSS规则。从这一点开始,您应该能够看到哪些修改覆盖了您的规则,并显示“Computed style”部分中描述的元素。

If you dont find anything please give a look to your inline styles.

如果你没有找到任何东西,请看看你的内联风格。

It would be easier to explain if I can look at some sample code...

如果我能看一些示例代码,就更容易解释了……

#3


1  

The applied style is shown in the top and then the overridden ones are shown crossed out as you scroll down. So, the overridden value should be somewhere above the one which has been crossed out.

应用的样式显示在顶部,然后在向下滚动时显示被覆盖的样式。因此,被重写的值应该位于已被删除的值之上。