CSS Nesting 教程

1. 简介

CSS Nesting 是 CSS 的一个新特性，允许你在 CSS 中嵌套选择器，从而使样式表更加结构化和易于维护。这个特性类似于 Sass 和 Less 等预处理器中的嵌套功能，但现在你可以直接在原生 CSS 中使用。

2. 为什么需要 CSS Nesting？

在传统的 CSS 中，为了给嵌套的 HTML 元素设置样式，你需要重复书写父元素的选择器。例如：

.parent {
  color: black;
}

.parent .child {
  color: red;
}

.parent .child .grandchild {
  color: blue;
}

这种方式不仅冗长，而且容易出错。CSS Nesting 允许你将这些选择器嵌套在一起，使代码更加简洁和直观。

3. CSS Nesting 语法

CSS Nesting 的语法非常简单。你只需要在父选择器内部嵌套子选择器即可。以下是一个简单的例子：

.parent {
  color: black;

  & .child {
    color: red;

    & .grandchild {
      color: blue;
    }
  }
}

在这个例子中，& 符号代表父选择器。通过这种方式，你可以清晰地看到选择器之间的关系。

4. 代码示例

让我们通过一个实际的例子来更好地理解 CSS Nesting。

HTML 结构

<div class="container">
  <div class="box">
    <div class="content">
      <p>Hello, World!</p>
    </div>
  </div>
</div>

传统 CSS

.container {
  width: 100%;
  padding: 20px;
}

.container .box {
  background-color: #f0f0f0;
  padding: 10px;
}

.container .box .content {
  color: #333;
  font-size: 16px;
}

使用 CSS Nesting

.container {
  width: 100%;
  padding: 20px;

  & .box {
    background-color: #f0f0f0;
    padding: 10px;

    & .content {
      color: #333;
      font-size: 16px;
    }
  }
}

通过使用 CSS Nesting，代码变得更加简洁和易于维护。

5. 实践练习

练习 1：嵌套导航栏样式

创建一个简单的导航栏，并使用 CSS Nesting 来设置样式。

HTML

<nav class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

.navbar {
  background-color: #333;
  padding: 10px;

  & ul {
    list-style: none;
    padding: 0;
    margin: 0;

    & li {
      display: inline-block;
      margin-right: 10px;

      & a {
        color: white;
        text-decoration: none;
        padding: 5px 10px;

        &:hover {
          background-color: #555;
        }
      }
    }
  }
}

练习 2：嵌套表单样式

创建一个简单的表单，并使用 CSS Nesting 来设置样式。

HTML

<form class="contact-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Submit</button>
</form>

CSS

.contact-form {
  width: 300px;
  padding: 20px;
  background-color: #f0f0f0;

  & label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  & input[type="text"],
  & input[type="email"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  & button {
    background-color: #333;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: #555;
    }
  }
}

6. 总结

CSS Nesting 是一个强大的特性，它使 CSS 代码更加结构化和易于维护。通过嵌套选择器，你可以更清晰地表达样式之间的关系，减少代码冗余。虽然目前 CSS Nesting 还不是所有浏览器的标准功能，但你可以通过使用预处理器或 Polyfill 来提前体验这一特性。

希望这篇教程能帮助你更好地理解和使用 CSS Nesting！