Question

假设我有两个html页面p1＆amp; p2，它使用不同的布局l1＆amp;分别为l2。我必须设计两种不同的布局，我只想使用通用的ID名称。我只是想让你明白我心中的想法，同样也是骗子js fn（当我们使用js时，id确实很重要）。

  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名称，它不应相互影响。

Answer 1

班级名称可能更合适

//.... Html
<div class='left1' id='data'>
    <div class='left2' id='info'>
        your code goes here
    </div>
more code goes here
</div>

的CSS

.left1
{
/*css code here*/
}
.left2
{
/*css code here*/
}

Answer 2

您无法通过页面的文件名识别页面中的HTML元素，因此您必须在每个页面中的style标记中添加唯一样式，或者为每个页面使用ID /类。

在p1.html中，为您的body元素提供p1的ID，在p2.html中将其命名为p2，为您的div {{1}命名分别为{}和right，因此您的HTML看起来像这样（仅显示left个内容）：

p1.html

body

p2.html

<body id="p1">
  <div id="right"></div> 
  <div id="left"></div>
</body>

然后使用这些选择器：

<body id="p2">
  <div id="right"></div> 
  <div id="left"></div>
</body>

CSS编码（ID＆amp; Class）

2 个答案: