我不确定我是否正确编写了此 CSS

Question

我在括号和所有大写字母中写下了我在家庭作业说明中感到困惑的事情。

这是我的作业说明：

在"main.css"文件的第一行创建一个注释，内容为"常规"。在该评论下写下以下内容 使用通用选择器将所有元素的边距和填充设置为零。我们这样做是为了消除浏览器添加的所有默认边距和填充。 从模板页面(在课程网站上)添加 css 行，该行将一些选择器分组并将它们全部设置为"显示块"。 跳过一行并写一条注释，内容为"包装器"。在该注释下编写一个 css id "wrapper"并添加以下属性。 给它一个 1024px 的宽度 为其指定一个值为 0 和 auto 的边距属性 (margin： 0 自动使页面在浏览器窗口居中。我们必须有一个宽度来允许它显示它是居中的。 跳过一行并写一条写"main"的评论。 在主元素的左下角周围放置一个 1px 实心 #000 的边框。 (不确定我是否正确完成了这部分^) 向主元素添加 10px 的填充。我们添加了一个填充，这样内容就不会撞到主元素的边缘 使用上下文选择器选择分区元素内ID为"images"的所有图像，并将每个图像高度设置为90px，宽度设置为120px，图像周围的边距为20px。我们正在使用 CSS 来调整图像大小。 (不确定如何编写上下文选择器来选择带有 DIV 元素和 ID 为 "IMAGES" 的所有图像)

这是我创建的，但不确定它是否正确：

/* general */
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
*{margin: 0; padding: 0;}
article, aside, figure, footer, header, main, menu, nav, section {display: block;}
<style>
/* wrapper */
#wrapper {width: 1024px; margin: 0 auto; }
/* main */
main{border-left: solid 1px #000; border-bottom: solid 1px #000; border-right: solid 1px #000; padding: 10px; }

div images, #images {height: 90px; width: 120px; margin: 20px; }
</style>

Answer 1

你家庭作业中的措辞非常糟糕，但我相信你正在寻找的是定位 DIV 中包含的 ID 为images的所有元素。这将是：

div #images {
height: 90px;
width: 120px;
margin: 20px;
}

这将针对任何 DIV 中 ID 为images的任何元素，即使它们之间有一个元素(例如<div><span><img id="images"></span></div>)。请注意，您还可以使用>来定位直系后代。div > #images将针对<div><img id="images"></div>，但不会针对<div><span><img id="images"></span></div>。

请记住，页面上有多个具有相同 ID 的元素是无效标记，并且页面将无法正确验证。唯一有效的情况是，如果您的老师打算在多个不同的页面上具有一个名为#images的单个元素。您应该使用类来定位同一页面上的多个元素。你的老师可能想让你使用一个班级，这将是div .images.

至于您的边框，您已经正确完成了，但请注意，您可以使用速记border一次设置所有四个边框：

main {
border: solid 1px #000;
padding: 10px;
}

另外，请记住，您的第二行也应该在注释中，否则它将抛出语法错误：

/*Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.*/

希望这有帮助！ :)

Answer 2

嗨，我会尽力回答这个问题，我只是一个编程学生，所以这是我最好的镜头:)

首先，id 必须是唯一的，您不能在同一页面上有两个相同的 id。

如果你有等

<div id="test"></div>
<div id="test"></div>

你试着把它的样式设置为 #test{background-color： red}，只有最后一个div实际上会有红色背景。

但基本上这就是他想要的：

/*--GENERAL--*/
*{
margin:0;
padding: 0;
}
/*--WRAPPER--*/
#wrapper{
width: 1024px;
margin: 0 auto;
}
/*--MAIN--*/
main{
border-left: 1px solid #000;
padding: 10px;
}
div #images img{
height: 90px;
width: 120px;
margin: 20px;
}

上下文选择器示例

我希望这对你的编程之旅有所帮助！ :)