个人中心
gpt4 book ai didi

javascript - ID 以数字开头 - Styling Someone's Code

转载 作者：太空宇宙 更新时间：2023-11-03 23:15:41 25 4
gpt4 key购买 nike

我有一个网站，我必须重新设计它使用网络打印电子商务服务。他们让我可以访问大部分网站代码，因此我可以自己设计网站。我的问题是，出于某种原因，我们使用的公司不允许我们更改顶部导航栏的 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>

最佳答案

您可以使用 attribute selector :

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

或者你可以 escape the number :

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

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

关于javascript - ID 以数字开头 - Styling Someone's Code，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30671776/

25 4 0
文章推荐： javascript - 图片无法正确放入 div
文章推荐： opencv - 如何在相机不失真后保存 View
文章推荐： opencv - opencv_createsamples 中的链接问题
文章推荐： html - 背景颜色填充文本后面 div 的前 70px
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com