CSS结构设计

Question

我有二十多个div。 div的ID为#div_1,#div_2,#div_3 ...

每个div都有一个按钮和一个图像。 并且它们在每个div中的名称相同： #button_1, #image_1 。

是否可以像这样构造我的css：

#div1 {
  #button_1{ };

  #image_1{};  
}


#div2 { 
  #button_1{};

  #image_1{};  
}

Answer 1

首先，您永远不要在同一页面中多次使用相同的ID。 ID的全部意义在于它是唯一的。

因此，在每个div中使用名为id='button_1'的按钮是错误的。

如果要多次使用相同的引用，请使用类而不是ID。 因此，例如，您的按钮应改为class='button_1' 。

其次，您要求的CSS语法不正确。 您不能以这种方式嵌套CSS。 但是，您的要求可以轻松实现。 只需将选择器链接在一起，如下所示：

#div1 .button_1 { ... }
#div1 .image_1 { ... }

#div2 .button_1 { ... }
#div2 .image_1 { ... }

等等

但是，如果图像和按钮之间相似，则无需指定两次样式，只需为包含共享样式的两个类创建一个CSS块：

.button_1 { ... }
.image_1 { ... }

您仍然可以按照之前讨论的相同方式声明它们之间任何不同的样式，因此您的整个CSS可能如下所示：

/* shared styles for all the buttons */
.button_1 { ... }
/* shared styles for all the images */
.image_1 { ... }

/* extra styles only applying to the ones in div1 */
#div1 .button_1 { ... }
#div1 .image_1 { ... }

/* extra styles only applying to the ones in div2 */
#div2 .button_1 { ... }
#div2 .image_1 { ... }

...等等。

希望能有所帮助。

Answer 2

ID是唯一的，您不应在页面中重复它们。 您不能有多个#button_1's和#image_1's

您真正应该做的是：

的HTML

<div id="div-1" class="foo">
    <button id="button-1">Hello</button>
    <img src="blah.gif" id="img-1" />
</div>


<div id="div-2" class="foo">
    <button id="button-2">Hello</button>
    <img src="blah.gif" id="img-2" />
</div>


<div id="div-3" class="foo">
    <button id="button-3">Hello</button>
    <img src="blah.gif" id="img-3" />
</div>

的CSS

.foo { ... }
  .foo button { ... }
  .foo img { ... }

请注意，要在div中设置按钮和图像的样式，实际上并不需要为其指定ID

Answer 3

不，您不能这样编写CSS。 无论如何，如果您发现自己在一个系列中设计了20个单独的DIV，那么您做错了什么。 为类编写样式而不是为ID编写样式会更简单

Answer 4

您可以做的是写类似：

#div2 #button_1{

}

#div2 #image_1{

}

如果您试图使CSS规则仅对某个div内的对象可用（在上面的示例中，它们仅适用于div2内的div）。

Answer 5

看一下您想使用mixin的http://sass-lang.com/