CSS父子选择器正确语法答案

【问题标题】：CSS parent and child selector correct syntaxCSS父子选择器正确语法
【发布时间】：2017-11-07 23:13:14
【问题描述】：

我最近看到这样的 CSS：

.header {
    position: relative;
    max-height: 1000px;
    z-index: 1;

    .sidebar{
        padding: 25px 25px;
    }

    .menu{

        border-radius:0;
        min-height: 30px;
        height:100px;

        i{
            color:#CCC !important;
            width:40px;
        }
    }
}

我猜header 是父类，sidebar 和menu 是header 的子类。

这是有效的 CSS 语法还是好的做法？

通常我希望 CSS 是这样的：

.header { ... }
.header .sidebar { ... }
.header .menu { ... }

甚至

.header { ... }
.header > .sidebar { ... }
.header > .menu { ... }

这三种情况有什么区别？

【问题讨论】：

嗯第一个是SCSS。
正如普拉文所说；您展示 SASS 的示例，当编译成 CSS 文件时，它只会输出您在 #2 或 #3 中看到的内容。
哦，我显然是个菜鸟
@user2456977 将整个事情解释为您的答案。如果您理解并有任何疑问，请告诉我。

标签： css css-selectors parent-child

【解决方案1】：

第一个看起来像是 SCSS 或 LESS（或其他一些 CSS 预处理器）而不是 CSS，它们呈现为 #2。为了让您了解使用> 和不使用的区别是：

.header .sidebar { ... }
.header .menu { ... }

选择.sidebar 和.menu 在.header 内的任意位置。

<div class="header">
  <div class="sidebar"></div>
  <div class="menu"></div>
</div>

<div class="header">
  <div class="wrap">
    <div class="sidebar"></div>
    <div class="menu"></div>
  </div>
</div>

代码适用于上述两种情况。同时，如果您使用：

.header > .sidebar { ... }
.header > .menu { ... }

上面的代码不会是第二个包裹在.wrap 中的代码。第二个代码是direct descendant or a direct child selector。

【讨论】：

【解决方案2】：

第一个结构是 SCSS（一个 css 预处理器）。这就是 first 和 2&3 之间的区别。

SCSS 是 SASS 的一种特殊类型的文件，SASS 是一个用 Ruby 编写的程序，它为浏览器组装 CSS 样式表。 SASS 为 CSS 添加了许多附加功能，例如变量、嵌套等，这可以使编写 CSS 变得更容易和更快。 SCSS 文件由运行 Web 应用程序的服务器处理，以输出您的浏览器可以理解的传统 CSS。

2&3 的区别在于> 的使用，意思是“直接子选择器”。例如.header .sidebar 将选择.sidebar 内的所有.sidebar，无论他们是子孙等。

 <parent>
   <child></child>
   <child>
      <grandchild></grandchild>
   </child>
 </parent>

所以它会选择子孙，然后再往下走。

使用> 只会选择child 而不是grandchild

【讨论】：

你怎么能确定它是 SCSS 优于任何其他 CSS 预处理器？
另外，SCSS 不是 CSS 扩展，而是 CSS 预处理器。
说it is SCSS 没有错。我不是百分百确定。但它可以。你能证明不是吗？ SCSS 它是最常用的。它可以更少。或其他。这并不意味着我的假设是 SCSS 是不正确的。 @PraveenKumar 我的错，SASS 是扩展