当这些样式移动到.CSS文件中时，直接应用于元素的样式会丢失 [英] Styles applied directly to an element are lost when those styles moved into .CSS file

问题描述

从这开始：

 < div class =mainContentstyle =color：white; overflow-y： auto; position：fixed; top：210px; bottom：60px;> 
< div class =linkContentid =contentAboutUsstyle =display：none>< / div> 
< div class =linkContentid =contentAboutUsOmnistyle =display：none>< / div> 
< div class =linkContentid =contentAboutUsVerifystyle =display：none>< / div> 
< div class =linkContentid =contentAboutUsSelfstyle =display：none>< / div> 
< div class =linkContentid =contentAboutUsHowstyle =display：none>< / div> 
< / div> 
  

以及.css文件内容：

  .mainContent {
 
 width：850px; 
 xmargin-left：1％; 
 border：1px纯银; 
背景：透明网址（../ images / mainContentOverlay.png）; 
 
 -moz-border-radius：6px; 
 -webkit-border-radius：6px; 
 -khtml-border-radius：6px; 
 border-radius：6px; 
 
 
  

一切都很好。

但是，当我直接将样式应用于DIV并将其移入.css文件（并从div中删除样式attr）时，表单会折叠混乱。

而且，是的，我在顶部：

 < link rel =stylesheethref =css / style.csstype =text / cssmedia =screen/> 
  

...它提供的所有其他样式都可以正常工作

任何想法有什么不对吗？

我已经看过这个，没有成功：

<编辑：

人们要求后代码进行比较。我原本没有包括它，因为它看起来很容易看出结果。但是这里是AFTER版本：

 < div class =mainContent> 
< div class =linkContentid =contentAboutUsstyle =display：none>< / div> 
< div class =linkContentid =contentAboutUsOmnistyle =display：none>< / div> 
< div class =linkContentid =contentAboutUsVerifystyle =display：none>< / div> 
< div class =linkContentid =contentAboutUsSelfstyle =display：none>< / div> 
< div class =linkContentid =contentAboutUsHowstyle =display：none>< / div> 
< / div> 
 
 
 .mainContent {
 
颜色：白色;溢出-y：auto;位置是：固定;顶：210px;底部样例图片： 
 width：850px; 
 xmargin-left：1％; 
 border：1px纯银; 
背景：透明网址（../ images / mainContentOverlay.png）; 
 
 -moz-border-radius：6px; 
 -webkit-border-radius：6px; 
 -khtml-border-radius：6px; 
 border-radius：6px; 
 
} 
  

解决方案

：
$ b $ 1.在某些情况下，href =css / style.css可以区分大小写，所以如果你的文件是'Css / style.css'（大写C ）它可能无法正常工作。
尝试查看您的浏览器是否可以访问css / style.css文件。

2.样式和.css文件的优先级取决于它们的放置位置。
最新的地方有更多的优先权。

如果您这样做：

 < link rel =stylesheethref =c1.csstype =text / cssmedia =screen/> 
< link rel =stylesheethref =c2.csstype =text / cssmedia =screen/> 
  

和

 < div class ='a_c1css_style a_c2css_style'>< / div> 
< div class ='a_c2css_style a_c1css_style'>< / div> 
  

两个DIV都有相同的结果，因为在页面中的c1.css之后使用了c2.css。 / p>

Start with this:

    <div class="mainContent" style="color:white; overflow-y: auto; position:fixed; top:210px; bottom:60px;">
        <div class="linkContent" id="contentAboutUs"        style="display:none"></div>
        <div class="linkContent" id="contentAboutUsOmni"    style="display:none"></div>
        <div class="linkContent" id="contentAboutUsVerify"  style="display:none"></div>
        <div class="linkContent" id="contentAboutUsSelf"    style="display:none"></div>
        <div class="linkContent" id="contentAboutUsHow"     style="display:none"></div>
    </div>

And this .css file content:

.mainContent {

    width: 850px; 
    xmargin-left:1%;
    border: 1px solid silver; 
    background:transparent url(../images/mainContentOverlay.png);

    -moz-border-radius:     6px;
    -webkit-border-radius:  6px;
    -khtml-border-radius:   6px;
    border-radius:          6px;

}

And everything is just fine.

But when I take the style applied directly to the DIV and move it into the .css file (and remove the style attr from the div), the form collapses into chaos.

And, yes, I have at the top:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

... and all the other styles it provides are working just fine also.

Any idea what is wrong?

I have already looked at this, without success: Why do CSS styles only take affect when placed in a style tag in my form and not in the associated CSS file?

EDIT:

Folks have asked for the "after code" for comparison. I didn't include it originally because it seemed pretty easy to visualize the result. But here is the AFTER version:

    <div class="mainContent">
        <div class="linkContent" id="contentAboutUs"        style="display:none"></div>
        <div class="linkContent" id="contentAboutUsOmni"    style="display:none"></div>
        <div class="linkContent" id="contentAboutUsVerify"  style="display:none"></div>
        <div class="linkContent" id="contentAboutUsSelf"    style="display:none"></div>
        <div class="linkContent" id="contentAboutUsHow"     style="display:none"></div>
    </div>


.mainContent {

    color:white; overflow-y: auto; position:fixed; top:210px; bottom:60px;
    width: 850px; 
    xmargin-left:1%;
    border: 1px solid silver; 
    background:transparent url(../images/mainContentOverlay.png);

    -moz-border-radius:     6px;
    -webkit-border-radius:  6px;
    -khtml-border-radius:   6px;
    border-radius:          6px;

}

解决方案

Some points :

1.In some situation href="css/style.css" can be case sensitive so if your file is 'Css/style.css' (with capital C) it may not work. Try to see whether css/style.css file is accessible in you browser or not.

2.The priory of styles and .css files depends on where to place them. The latest place has the more priority.

if you do somthing like this :

<link rel="stylesheet" href="c1.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="c2.css" type="text/css" media="screen"/>

and

   <div class='a_c1css_style  a_c2css_style'></div>
   <div class='a_c2css_style  a_c1css_style'></div>

Both DIVs have the same result because c2.css is used after c1.css in the page.

这篇关于当这些样式移动到.CSS文件中时，直接应用于元素的样式会丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！