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是唯一的，您不应在页面中重复这些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/

CSS结构设计

5 个答案:

HTML

CSS