Question

我有一个网站，我必须重新设计使用网络到印刷的电子商务服务。他们让我访问大多数网站代码，所以我可以自己设置网站的样式。我的问题是，由于某种原因，我们使用的公司不允许我们更改顶部导航栏的HTML，说它会干扰他们的动画导航的后端JavaScript。可悲的是，他们的程序员决定在他们的开头用数字命名他们的ID，这使得几乎不可能从样式表中设置它。（ID的开头不能有数字。）我将发布他们给我使用的代码，然后发布我更改的代码以创建所需的效果。问题是我不能使用我当前的代码，因为我必须更改他们的ID以使其工作。有没有人知道一个可以在我的第二个演示中找到所需影响而无需更改ID名称的解决方法？我尝试了内联样式，但我不认为可以使用内联来获得悬停效果。

www.offsetprinting.com

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

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

Answer 1

您可以使用attribute selector：

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

或者你可以escape the number：

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

这样做的好处是无需编辑html

Answer 2

看起来他们中的很多人都缺少课程，为什么不添加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; 
}

ID从数字开始 - 为其他人的代码设置样式

2 个答案: