CSS 给 body 元素一个属性，给元素 INSIDE body 另一个属性答案

【问题标题】：CSS Given a property to body element, give another property to element INSIDE bodyCSS 给 body 元素一个属性，给元素 INSIDE body 另一个属性
【发布时间】：2021-05-18 21:48:15
【问题描述】：

我的所有body 都在一个专栏中。但我希望我的标题（在我的身体内部）位于另一列。

如何选择 header 元素并更改其属性，即使 body 元素还有其他属性？

我试过了：

html {
     display: grid;
     grid-template-columns: 10% 90%;
}

body {
    grid-column-start: 2;
}

header {
    grid-column-start: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Web.</title>
</head>
<header>

    <p>Outside the body</p>

</header>
<body>
    <p>Inside the body</p>
</body>
</html>

【问题讨论】：

请也分享您的 HTML
已经编辑，我不能让标题从另一列开始@Dominik
我不明白这个问题。您希望标题位于下一列中，对吗？
是的，确实@Dominik

标签： css css-grid stylesheet

【解决方案1】：

首先，您必须修复您的 HTML。 <body> 标记包装了 HTML 文档的内容，因此您不能将其用作文档中的容器。我把它变成了一个<main> 标签，它更像你在寻找我收集的东西。

然后我为两个单元格指定了grid-row-start，这样单元格就不会移动到下一行。

纯粹是为了点缀，我添加了gap 和背景颜色，以便您可以更好地看到正在发生的事情。这些对于这个工作并不重要。

body {
     display: grid;
     grid-template-columns: 10% 90%;
     gap: 1rem;
}

main {
    grid-column-start: 1;
    grid-row-start: 1;
    background: rgba(255, 125, 0, 0.2);
}

header {
    grid-column-start: 2;
    grid-row-start: 1;
    background: rgba(255, 125, 0, 0.2);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Web.</title>
</head>
<body>
  <header>
    <p>Outside the body</p>
  </header>
  <main>
    <p>Inside the body</p>
  </main>
</body>
</html>

【讨论】：