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">

这是视觉上的变化：

enter image description here

我缺少什么或者应该修复什么？

修改

在评论之后我去看了CSS文件并找到了：

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

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

    .panel
    {
        position: relative;
    }

    /* Me */

        #me
        {
        }

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

Answer 1

这是因为在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成为你想要的。

Answer 2

如Hamed Ali Khan所评论，id可能在样式表中使用。

在样式表中，您应该将包含#me的所有样式更改为#start。

或者你可以在元素中添加一个额外的类。例如<article id="start" class="extraStyle panel">。然后，您应该将所有#me更改为.extraStyle。

Answer 3

你也必须在CSS文件中改变这一点。

CSS中使用id应用的样式，例如#article-id .child{some :style; }

您在HTML中更改的内容也可能在CSS中反映出相同内容。

Answer 4

这可能是因为CSS中的某些元素被定位，如下所示

#foo .bar{
}

这意味着它会影响ID为 foo 的元素中具有 bar 类的元素。这就是为什么更改元素的ID可能会破坏它的内容风格。

Answer 5

更换ID会破坏与#home元素相关的样式。

打开您的CSS文件，并重命名#home中的所有#me。

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

5 个答案: