时间戳

首页 > 解决方案 > CSS 给 body 元素一个属性，给元素 INSIDE body 另一个属性

css - CSS 给 body 元素一个属性，给元素 INSIDE body 另一个属性

问题描述

我的所有内容都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>

标签： csscss-gridstylesheet

解决方案

首先，您必须修复您的 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>

推荐阅读