Question

我正在分配作业，我不知道如何在图像之间增加间距。我需要创建一个样式规则，将带有ID容器的div元素的右侧和底部填充设置为8像素。

对于属于单元类的div元素中的每个元素，创建一个样式规则以将超文本链接显示为一个宽度为100％的块，并将左和顶部填充设置为8像素。

div#container {

  padding-right: 8px;

  padding-bottom: 8px;
}

div[class^="cell"]>a {

  display: block;

  width: 100%;

  padding-left: 8px;

  padding-top: 8px;
}

这就是我所拥有的，它说错了。我还尝试将div[class^="cell"]更改为div[.class^="cell"]和div[class="cell"]以及div[#class^="cell"]，但是它们都不起作用。

您看到任何错误或可以更改的任何内容吗？

Answer 1

基于CSS，我希望您的HTML看起来像这样。以下代码适用于CSS

div#container {
  padding-right: 8px;
  padding-bottom: 8px;
}

div[class^="cell"]>a {
  display: block;
  width: 100%;
  padding-left: 8px;
  padding-top: 8px;
}

<div id="container">
  <div class="cell_1">
    <a href="#">Sample Line here</a>
    <a href="#">Have another line</a>
  </div>
  <div class="cell_2">
    <a href="#">Here is a third line in a separate cell</a>
    <a href="#">Have a fourth line</a>
  </div>
</div>

由于我不知道您使用的HTML是什么，所以让我们来谈谈CSS的建议。 div#container查找包含容器ID <div>的{{1}}标签。

<div id="container">发生了几件事情。请注意，只要您的选择器带有方括号div[class^="cell"]>a，我们都会根据属性进行选择。在这种情况下，您可以清楚地看到我们正在寻找一个类属性。 []表示该属性应以提供的字符开头。

因此，^=本身将选择包含以字符“ cell”开头的类的所有div元素。因此，具有div[class^="cell"]，.cell，.cell_1，.cell_3类的div元素将全部匹配。

选择器中的.cellular字符将查找直接子元素。

在此代码示例中：

“此处的示例行”将被匹配，因为它是<div class="cell_1"> <a>Sample Line Here</a> <div> <a>Have another line</a> </div> </div>的直接子代 “具有另一条线”嵌套在另一个div元素中，因此不会获得您的自定义样式。

.cell_1会按字面意思进行翻译以选择
所有div[class^="cell"]>a标签的所有<a>标签都是<div>标签的直接子元素，其中包含以字符“ cell”开头的类属性

如果使用的是类.cell，而不是使用以“ cell”开头的类，则可以将div[class^="cell"] > a替换为div.cell > a或.cell > a。如果您也不需要定位直接后代，则可以尝试看看.cell a是否成功。它将定位到任何具有“ cell”类的元素内的所有<a>标签。

我希望这会有所帮助。如果不是，请在您的问题中添加HTML，以便我们帮助您更彻底地解决问题。来自w3学校的CSS选择器参考非常棒：https://www.w3schools.com/cssref/css_selectors.asp

在图像之间添加空间

1 个答案: