假设我有两个html页面p1 &P2，它使用不同的布局l1 &l2分别。我必须设计两种不同的布局，我只想使用常见的ID名称。我只是想让你明白，我在我的脑海里，请考虑js fn太(id确实很重要，当我们使用js)。
commonPage.css
p1 > l1 > #right { width:25%; height:25% .... }
> #left { width:25%; height:25% .... }
p2 > l2 > #right { width:30%; height:35% .... }
> #left { width:30%; height:35% .... }
以下是HTML页面:
p1.html
<html> <head> <link rel="stylesheet" href="commonPage.css" type="text/css"/>
</head> <body>
<div id = "l1.right"></div> <div id= "l1.left"></div> </body></html>
p2.html
<html> <head> <link rel="stylesheet" href="commonPage.css" type="text/css"/>
</head> <body>
<div id = "l2.right"></div> <div id= "l2.left"></div> </body></html>
@编辑我的问题是:如何为许多具有不同属性的html标签编写相同的Id名称，它不应该相互影响。
你不能通过页面的文件名来识别页面中的HTML元素，所以你必须在每个页面的style标签中放置独特的样式，或者为每个页面使用id/类。
在p1.html中，给你的body元素一个ID为p1，在p2.html中命名为p2，分别命名为div s right和left，所以你的HTML看起来像这样(只显示body内容):
p1.html
<body id="p1">
<div id="right"></div>
<div id="left"></div>
</body>
p2.html
<body id="p2">
<div id="right"></div>
<div id="left"></div>
</body>
然后使用以下选择器:
#p1 > #right
#p1 > #left
#p2 > #right
#p2 > #left
类名可能更合适
//.... Html
<div class='left1' id='data'>
<div class='left2' id='info'>
your code goes here
</div>
more code goes here
</div>
.left1
{
/*css code here*/
}
.left2
{
/*css code here*/
}