CSS 给正文元素一个属性，给正文中的元素另一个属性

Question

我的所有 body 都在一栏中。但是我希望我的页眉（在我体内）在另一列上。

即使 body 元素有其他元素，我如何 select header 元素并更改其属性？

我试过：

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>

Answer 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>

CSS 给正文元素一个属性，给正文中的元素另一个属性

CSS Given a property to body element, give another property to element INSIDE body

css

stylesheet

css-grid

CSS 给正文元素一个 属性，给正文中的元素另一个 属性

CSS Given a property to body element, give another property to element INSIDE body

css

stylesheet

css-grid

CSS 给正文元素一个属性，给正文中的元素另一个属性