ID'以数字开头——修饰别人的代码

ID's beginning with numbers - Styling Someone else's Code

本文关键字：代码 别人 开头 数字 ID      更新时间：2023-09-26

我有一个网站，我必须重新设计，使用网络印刷电子商务服务。他们给我访问大多数网站的代码，所以我可以样式的网站自己。我的问题是，由于某些原因，我们使用的公司不让我们改变顶部导航栏的HTML，说这会干扰他们的后端javascript动画导航。遗憾的是，他们的程序员决定用数字来命名他们的ID，这使得几乎不可能从样式表中样式化它。(身份证的开头不能有数字。)我要把他们给我的代码贴出来，然后也把我修改过的代码贴出来，以达到我想要的效果。问题是我不能使用我目前的代码，因为我不得不改变他们的ID，使其工作。有没有人知道一个变通的办法，可以得到我想要的影响，我正在寻找在我的第二个演示不改变ID名称?我尝试了内联样式，但我不认为这是可能得到悬停效果与内联。

www.offsetprinting.com

演示1 -使用我必须使用的HTML ID标签。

演示2 -使用我的HTML更改的ID与期望的影响。

<body class="desktop webkit webkit_525">
        <div id="header">
            <div class="content_width rel">
                <a href="./Welcome to our site!_files/Welcome to our site!.html">
                    <div id="header_logo"></div>
                </a>                
                <ul id="top_nav">
                    <li><a class="home_icon" href="./Welcome to our site!_files/Welcome to our site!.html">Home</a></li>
                    <li><a href="http://www.offsetprinting.com/account/contact">Contact</a></li>
                    <li><a href="https://secure.offsetprinting.com/account/estimate">Estimates</a></li>
                    <li><a href="http://www.offsetprinting.com/helpcenter">Help Center</a></li>
                    <li><a href="https://www.grifolsorderdesk.com/">Grifols</a></li>
                    <li><a href="http://www.salesaidtools.com/">Sales Aid Tools</a></li>
                    <li><a href="https://secure.offsetprinting.com/account/summary">Shopping Cart</a></li>
                    <li class="last-child"><a href="https://secure.offsetprinting.com/account/dashboard">My Account</a></li>
                </ul>
                                <ul id="loginbar" class="rounded">
                    <li><a href="https://secure.offsetprinting.com/account/signup">New Account</a></li>
                    <li class="last-child"><a href="https://secure.offsetprinting.com/account/login">Login</a></li>
                </ul>
                <div id="header_products"></div>                

                <div id="product_search">
                    <input id="product_ti" class="default" type="text" value="Find A Product">
                    <input id="product_btn" type="button" value="Search">
                    <input id="product_default" type="hidden" value="Find A Product">
                </div>      
            </div>
        </div>

<!-- Navigation Bar //// Had to change ID's with numbers at the front to add hover affect with CSS -->
<div id="nav">
    <ul id="nav_links" class="content_width_adjust">
        <li id="color_offset_printing" style="width:183px;background-color:#343232;height:44px;border-top:4px solid #009ad6;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;" class="">
            <a class="nav_parent narrow" href="">
                <span>4-Color Offset Printing</span>
                                                </a>
                                                    </li>
        <li id="large_format" style="width: 139px; background-color:#343232;height:44px;border-top:4px solid #c60077;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;" class="">
            <a class="nav_parent wide" href="">
                <span>Large Format</span>
                                                </a>
                                                    </li>
        <li id="color_printing" style="width: 164px;background-color:#343232;height:44px;border-top:4px solid #cec41e;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;" class="">
            <a class="nav_parent" href="">
                <span>1&2 Color Printing</span>
                                                </a>
                                                    </li>
        <li id="color_digital_printing" style="width: 189px; background-color:#343232;height:44px;border-top:4px solid #000000;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;" class="">
            <a class="nav_parent narrow" href="">
                <span>4-Color Digital Printing</span>
                                                </a>
                                                    </li>
        <li id="roll_labels" style="width: 130px; background-color:#343232;height:44px;border-top:4px solid #565656;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;" class="">
            <a class="nav_parent wide" href="">
                <span>Roll Labels</span>
                                                </a>
                                                    </li>
        <li id="services" class="last" style="width: 133px;background-color:#343232;height:44px;border-top:4px solid #848484;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;   
    box-sizing: border-box;">
            <a class="nav_parent services" href="">
                <span>Services</span>
                                                </a>
                                                    </li>
    </ul>
</div>

您可以使用属性选择器:

[id='4_color_offset_printing'] {
    /* Your styling */
}

或者您可以转义数字:

#'34 _color_offset_printing{
    /* your styling */
}

这样做的好处是不必编辑html

似乎它们中的许多都缺少类，为什么不添加类，即id减去前面的数字，然后在css中按类引用元素

html: 

<li id="4_color_offset_printing" style="width:183px" class="color_offset_printing"><a class="nav_parent narrow" href=""><span>4-Color Offset Printing</span></a></li>
css: 

.color_offset_printing a:hover { /* Controls the hover affect on divs that     contain the link */
    background-color:#009ad6;
    height:11px;
}
.color_offset_printing {
    width:200px; 
}
相关文章：