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

你甚至没有一个id =＆＃34;矩形的元素＆＃34;所以从你的CSS定义中取出它。只需使用：

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

Answer 2

不需要复杂性。只需使用，

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

Answer 3

添加'。'到CSS元素所以：

.emptySlot { 
    #rectangle {
    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 { 
    #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;
}

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

正确设置一类div的CSS样式

5 个答案: