Question

我最近在学习CSS，并且在我的项目中遇到了这个要求。我的HTML看起来像这样。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="lvl1_nav">
        <table border="0" cellpadding="0" cellspacing="1" width="100%">
            <tbody>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td id="leftheaderlogo" style="height: 25px !important;"
                        class="logoPadding" rowspan="2"></td>
                    <td width="25%"><span id="lvl1_nav_title"
                        style="font-weight: normal;">PRODUCT TITLE</span></td>
                    <td rowspan="2" width="75%">...</td>
                </tr>
                <tr>
                    <td width="25%"><span id="lvl1_nav_title"
                        style="cursor: default; font-weight: bold;">PRODUCT 2nd
                            Level Title</span></td>
                </tr>
            </tbody>
        </table>
        <select id="portalModuleGroups" class="modulemenu"
            style="display: none;">
        </select>
    </div>
</body>
</html>

由于代码限制，我没有任何选择使用除CSS之外的任何其他技术。

我正在寻找使用CSS替换“PRODUCT TITLE”和“PRODUCT二级标题”的最佳选择。我面临的主要问题是，两个范围都具有相同的id span id =“lvl1_nav_title”。

有可能吗？

Answer 1

重复ID问题

其他几位人士指出了重复ID的问题。是的，这会使您的HTML不符合要求。是的，可能会发生坏事。但是，在实践中它可以正常工作：

#lvl1_nav_title { color: purple; }

会将颜色应用于具有该ID的所有元素。

如果可以编写JS，但由于某种原因无法更改多个ID，尽管您无法使用

来处理这两个元素

document.getElementById('lvl1_nav_title')

因为它只返回一个元素，你可以用

来解决它们

document.querySelectorAll('[id=lvl1_nav_title]')

无法使用CSS更改HTML内容

您面临的基本障碍是您无法通过CSS更改HTML内容。最重要的是，如果没有JS，你就无法做到你想做的事。

因此，在一天结束时，您确实需要修复HTML以获得唯一ID，并且无论如何您都必须使用JS来替换元素中的文本。

CSS的终极黑客

这是不推荐，除非您绝对，积极地无法触及HTML或编写JSS，并且必须拥有仅限CSS的解决方案。

我们的想法是将元素移动到屏幕边缘，隐藏在屏幕边缘。然后，应用提供新文本的::after伪元素，将其定位为原始元素原本应该返回的位置。

CSS：

span {    
    text-indent: -9999px;
    display: block;
}

span::before {
    position: relative;
    top: 0;
    left: 9999px;
}

span:first-child::before { content: 'NEW PRODUCT TITLE'; }
span:last-child::before  { content: 'NEW 2nd LEVEL TITLE'; }

HTML：

<span id="lvl1_nav_title">PRODUCT TITLE</span>
<span id="lvl1_nav_title">PRODUCT 2nd Level Title</span>

显然，你必须调整一些东西以适应你的特定HTML结构，但这是基本的想法。

用相同的id值替换HTML元素

1 个答案:

重复ID问题

无法使用CSS更改HTML内容

CSS的终极黑客