Question

转到“网格间距样式”部分。创建一个样式规则，将Border Box模型应用于属于以下类的div元素：容器，行，以column，cell开头的类以及嵌套在属于cell类的div元素内的元素。

我已经尝试了所有我能想到的，但没有任何效果。 *

Answer 1

HTML和CSS协同工作，使您看到的可视化网络。他们负责两个关键部分，

HTML是结构，很像建筑物的砖头，水泥。 CSS是最重要的视觉效果，例如墙上的油漆颜色和图片。

让我们从一个简短的例子开始，标题和段落

<h2>Heading level 2</h2>
<p>Our first paragraph</p>

这可能会在您的计算机上显示为黑色文本，我们可以使用CSS增添一些特色，这几乎就像口头规则，因此，如果我们想说“让每个段落文本都变成红色”，我们可以通过以下方式实现：

p {
    color: red;
}

我们可以通过添加更多规则来规定许多视觉特征：

p {
    color: red;
    font-weight: bold;
}

假设我们有多个段落，我们可能希望区分其中一个段落，这是我们可以使用“类”的地方，您可以像这样向HTML添加一个类：

<h2>Heading level 2</h2>
<p>Our first paragraph</p>
<p>Our second paragraph</p>
<p class="special">Our third paragraph</p>
<p>Our fourth paragraph</p>

然后在CSS中，您可以用与以前类似的方式来拾取它，但以句点开头。

.special {
    color: blue;
}

目前，我们可以将特殊类添加到几乎所有内容中，这会使文本变成蓝色，但也许我们不希望这样，例如：

<h2>Heading level 2</h2>
<p>Our first paragraph</p>
<p>Our second paragraph</p>
<h2 class="special">Heading level 2</h2>
<p class="special">Our third paragraph</p>
<p>Our fourth paragraph</p>

我们可能不希望我们的h2也变成蓝色，因此我们只能定位特定的HTML元素，例如：

p.special {
    color: blue;
}

h2.special {
    color: purple;
}

现在，“特殊”类的行为取决于所应用的元素。

回到您的示例，我们可以对其进行分解：

创建样式规则以应用“边框”模型
将其应用于属于以下类的div元素：容器，行类
以列，单元格开头的类
嵌套在属于单元格类的div元素中的元素。

现在，我们有4个不同的任务可以逐步构建。

我认为您已经发现边界框模型是一个属性，这使得各种元素的行为都更为合理。也就是说，您希望事情能够正常进行的直观方式不是默认设置，因此需要更正边界框模型。

此属性还需要在多个浏览器上都可以使用，因此您可以这样开始：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

尽管这里我们使用星号将其应用于所有内容。第2步是对此进行一点限制，因此我们以特殊的方式将特殊类限制为特定的元素，您需要在此处执行相同的操作。

请记住，如果用逗号分隔规则，则可以有多个规则：

.class1, .class2 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

第3部分比较模糊，但我认为它表示 column -1或 cell ular之类的类，这使我们有了CSS的有趣功能，您可以在CSS中执行一些非常类似于regex的基本操作，如下所示：

div[class^='startingwith'] {
  color: pink;
}

哪个仅适用于前2个div。注意^字符，在许多应用程序中，这意味着“开头为”，而不仅仅是CSS。

<div class="startingwith-this">Hello world</div>
<div class="startingwith-this-and-this">Hello world</div>
<div class="not-startingwith-this">Hello world</div>

还值得注意的是，您可以省略单词“ div”，然后将其应用于具有以指定名称开头的类的任何元素。

问题的最后一部分是尝试向您展示如何不仅仅通过调用类直接定位事物，您可以计算上下文并仅在遵循特定的HTML结构时应用样式，例如：

<div class="intro>
   <p>Main paragraph at the start</p>
</div>
<p>Other lesser paragraphs...</p>
<p>Other lesser paragraphs...</p>

您可以定位嵌套的段落，只需用空格分隔规则即可

.intro p { 
  color: crimson;
}

现在只有WITHIN .intro的段落将使用深红色样式，您可以应用此逻辑对锚标记执行相同的操作。

如何在CSS中写出来？

1 个答案: