正确设置一类div的CSS样式

我有一堆类似的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。

您甚至没有一个id="矩形"的元素，所以请将其从css定义中删除。只需使用：

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

不需要复杂性。使用即可，

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

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;
}

等等…当然还有更多的方法。。。

添加一个'.'到CSS元素so：

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

.是类选择器

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

或者，您可以有两个类：

<div class="empty-slot rectangle"></div>
.empty-slot { /*...*/ }
.rectangle { /*...*/ }

#是ID前缀

#foundation1 {/*...*/}

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

相关内容

最新更新

热门标签：