正确设置一类div的CSS样式

Question

我有一堆类似的div，我想作为矩形样式。对于小例子，我有：

<div id="foundation1" class="emptySlot"></div> 
    <div id="foundation2" class="emptySlot"></div> 
    <div id="foundation3" class="emptySlot"></div> 

我让他们都"emptySlot"类，使我们可以很容易地设置外部造型。我尝试了以下造型没有成功：

emptySlot { 
    #rectangle { 
    width:  50px; 
    height:  100px; 
    background: blue; 
    } 
} 

我指出我的浏览器到这些文件，但它似乎没有效果。我对网络技术完全陌生，所以请帮助我开始（或指向我的某处！）

感谢您的帮助！

编辑：我想要的一个重要功能是矩形在屏幕上的独特位置，在最小代码方面，这是一个很好的解决方案吗？这应该在HTML还是CSS？如果每个div都具有相同的样式，然后能够指定唯一的位置，那将会很好。看起来最好的地方是HTML。

Answer 1

emptySlot { 
    #rectangle { 
    width:  50px; 
    height:  100px; 
    background: blue; 
    } 
} 

这句法在CSS是不正确的，第一类是由它的名字前加一个圆点.，如表示：

.emptySlot { 
} 

其次，你不能有一个内部风格纯粹的CSS风格。

将这些“矩形”样式分配给您的divs有多种不同的方法。

方法1

/* First Div */ 
.emptySlot:nth-child(1) { 
    width:  50px; 
    height:  100px; 
    background: blue; 
} 
/* Second Div */ 
.emptySlot:nth-child(2) { 
    width:  50px; 
    height:  100px; 
    background: blue; 
} 

方法2

/* First Div */ 
#foundation1 { 
    width:  50px; 
    height:  100px; 
    background: blue; 
} 

等等..还有，当然更多的方法......

Answer 2

添加'。'到CSS元素如此：

.emptySlot { 
    #rectangle { 
    width:  50px; 
    height:  100px; 
    background: blue; 
    } 
} 

Answer 3

你甚至没有一个id =“rectangle”的元素，所以把它从你的css定义中拿出来。只需使用：

.emptySlot 
{ 
width: 50px; 
height 100px; 
background: blue; 
} 

Answer 4

.是类选择

.emptySlot { width : 50px; height : 100px; background : blue; } 

或者，你可以有两类：

<div class="empty-slot rectangle"></div> 

.empty-slot { /*...*/ } 
.rectangle { /*...*/ } 

#是ID前缀

#foundation1 {/*...*/} 

你不能像CSS那样嵌套规则（常规的CSS - 有一些工具可以让你编写类似的语言并编译成CSS，这些语言支持嵌套和其他有趣的功能，但是这些语言支持嵌套和其他有趣的功能，但是这是一个完全不同的蜡球，而且你不想长时间开始使用）。

Answer 5

没有必要的复杂性。只需使用，

.emptySlot { 
    width: 50px; 
    height 100px; 
    background: blue; 
}