I'm way buried in many nested levels of css, and I can't tell which style layer/level is messing up my display. How can I find out everything that's being applied to a particular element?
我埋没在许多嵌套级别的CSS中,我无法分辨哪个样式层/级别弄乱了我的显示。如何找出应用于特定元素的所有内容?
4 个解决方案
#1
13
Click Inspect (upper left) to select the element you want to check
单击Inspect(左上角)以选择要检查的元素
then on the right panel select the tab labeled "Style". It will also tell you from which .css file that particular property comes from
然后在右侧面板上选择标有“样式”的选项卡。它还会告诉您特定属性来自哪个.css文件
#2
2
Right click the element and choose "Inspect Element", then you should see the element and all of the CSS rules which contributed to it. You can modify the rules simply by clicking and editing the values to try out different things to correct problems.
右键单击元素并选择“Inspect Element”,然后您应该看到元素和所有CSS规则。您可以通过单击和编辑值来修改规则,以尝试不同的方法来纠正问题。
#3
2
Use the Inspect button. Click on the item you're interested in. On the right-hand side, Firebug shows all the styles of the element, and the file + line number they originiated from.
使用“检查”按钮。单击您感兴趣的项目。在右侧,Firebug显示元素的所有样式以及它们源自的文件+行号。
Find the style you're trying to apply, and see if it has a stroke through it. If it does, it's being overridden by something higher in the hierarchy.
找到您尝试应用的样式,并查看它是否有中风。如果是这样,它将被层次结构中更高的东西覆盖。
Now you have to decide how you want to solve it. Either by making your css entry more specific to the item in question, or modifying your styles in some other manner.
现在你必须决定如何解决它。通过使您的css条目更具体到相关项目,或以其他方式修改您的样式。
#4
1
from the 'CSS' tab, click on "Inspect" and then click on the element. All the applied styles (and their origin) will show up on the right hand side.
从“CSS”选项卡中,单击“Inspect”,然后单击元素。所有应用的样式(及其原点)将显示在右侧。
#1
13
Click Inspect (upper left) to select the element you want to check
单击Inspect(左上角)以选择要检查的元素
then on the right panel select the tab labeled "Style". It will also tell you from which .css file that particular property comes from
然后在右侧面板上选择标有“样式”的选项卡。它还会告诉您特定属性来自哪个.css文件
#2
2
Right click the element and choose "Inspect Element", then you should see the element and all of the CSS rules which contributed to it. You can modify the rules simply by clicking and editing the values to try out different things to correct problems.
右键单击元素并选择“Inspect Element”,然后您应该看到元素和所有CSS规则。您可以通过单击和编辑值来修改规则,以尝试不同的方法来纠正问题。
#3
2
Use the Inspect button. Click on the item you're interested in. On the right-hand side, Firebug shows all the styles of the element, and the file + line number they originiated from.
使用“检查”按钮。单击您感兴趣的项目。在右侧,Firebug显示元素的所有样式以及它们源自的文件+行号。
Find the style you're trying to apply, and see if it has a stroke through it. If it does, it's being overridden by something higher in the hierarchy.
找到您尝试应用的样式,并查看它是否有中风。如果是这样,它将被层次结构中更高的东西覆盖。
Now you have to decide how you want to solve it. Either by making your css entry more specific to the item in question, or modifying your styles in some other manner.
现在你必须决定如何解决它。通过使您的css条目更具体到相关项目,或以其他方式修改您的样式。
#4
1
from the 'CSS' tab, click on "Inspect" and then click on the element. All the applied styles (and their origin) will show up on the right hand side.
从“CSS”选项卡中,单击“Inspect”,然后单击元素。所有应用的样式(及其原点)将显示在右侧。