html - 为什么更改文章 HTML 元素的 id 会破坏 CSS 样式？

Question

我下载了一个HTML template , 开始修改一些元素，我要做的第一件事是更改 id <article> 的属性元素。

我只改变了它，因此网站外观变得不理想。控制台显示任何 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">

这是视觉变化:

我缺少或应该修复什么？

EDIT

在评论之后我去看了 CSS 文件并发现:

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

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

    .panel
    {
        position: relative;
    }

    /* Me */

        #me
        {
        }

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

Answer 1

这是因为在 CSS 中设置了 id me 的样式。

取自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 的每个实例成为你想要的。