css - 我怎样才能用 CSS 写出来？

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

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 中执行一些非常基本的类似正则表达式的操作，如下所示：

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 - 我怎样才能用 CSS 写出来？

问题描述

解决方案

推荐阅读