爲什麼改變文章的HTML元素的ID會破壞CSS樣式？

我下載了一個HTML template，開始修改一些項目，我想要做的第一件事是更改屬性爲<article>元素。爲什麼改變文章的HTML元素的ID會破壞CSS樣式？

我只有改變了，所以網站appeareance變成不是所需的一個。控制檯顯示任何CSS問題。

這是原代碼HTML部分我很感興趣：

<!-- Nav --> 
    <nav id="nav"> 
     <a href="#me" class="fa fa-home active"><span>Home</span></a> 
     <a href="#work" class="fa fa-folder"><span></span></a> 
     <a href="#email" class="fa fa-envelope"><span>Email Me</span></a> 
     <a href="http://twitter.com/daguilaraguilar" class="fa fa-twitter"><span>Twitter</span></a> 
    </nav> 

<!-- Main --> 
    <div id="main"> 

     <!-- Me --> 
      <article id="me" class="panel"> 
       <header> 
        <h1>Diego Benjamín <br><br> Aguilar Aguilar</h1> 
        <!-- <span class="byline">Senior Astral Projectionist</span> !-->

而只是改變了：

<a href="#start" class="fa fa-home active"><span>Home</span></a> 
<article id="start" class="panel">

這是視覺上的變化：

enter image description here

什麼我錯過了還是應該修復？

編輯

右鍵意見後，我去了，看到了CSS文件，結果發現：

/*********************************************************************************/ 
/* Panels                  */ 
/*********************************************************************************/ 

    #main 
    { 
     position: relative; 
     overflow: hidden; 
    } 

    .panel 
    { 
     position: relative; 
    } 

    /* Me */ 

     #me 
     { 
     } 

      #me .pic 
      { 
       position: relative; 
       display: block; 
      }

來源

2014-02-26 diegoaguilar

我們可以看到你的CSS嗎？ – Siyah

id「我」可能已經在CSS中使用，因此你會得到意想不到的結果。 –

這是因爲ID me在CSS被風格化。

從CSS（我下載）摘自：

#me 
{ 
} 

#me .pic 
{ 
    position: relative; 
    display: block; 
} 

#me .pic:before 
{ 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url('images/overlay.png'); 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
}

基本上，如果你想改變#me ID，你必須去到CSS樣式表並改變它也有。

更新

有各種不同的樣式。我從style.css那裏得到了這個片段，但是也有style-desktop.css，它有各種不同的#me風格。我的建議是要通過每個css文件並編輯#me的每個實例以達到您的要求。

來源

2014-02-26 09:16:20 Albzi

就像Hamed Ali Khan評論的那樣，ID可能在樣式表中使用。

在樣式表中，您應該將所有包含#me的樣式更改爲#start。

或者你可以添加一個額外的類到元素。例如<article id="start" class="extraStyle panel">。那麼你應該將所有#me更改爲.extraStyle。

來源

2014-02-26 09:16:25 LinkinTED

你必須在CSS文件中更改那個東西。施加有CSS id

的風格，像#article-id .child{some :style; }

您在HTML改變什麼可以反映CSS一樣了。

來源

2014-02-26 09:17:03

這可能發生，因爲在你的CSS一些元素針對性如下圖所示

#foo .bar{ 
}

這意味着它會影響與類條元素的元素的內部ID爲FOO。這就是爲什麼改變一個元素的ID可以真正搞亂它的內容風格。

來源

2014-02-26 09:18:04 Dropout

替換ID打破了與#home元素相關的樣式。

打開您的CSS文件，並將所有#home重命名爲#me。

來源

2014-02-26 09:18:33 enguerranws

爲什麼改變文章的HTML元素的ID會破壞CSS樣式？

回答

相關問題