Question

我最近一直在看这样的CSS：

1

.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：

2

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

甚至

第3

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

这三种情况有什么区别？

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

Answer 2

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

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

2＆amp; 3之间的差异是使用.header .sidebar，意思是“直接子选择器”。例如，.sidebar将选择.parent内的所有<parent> <child></child> <child> <grandchild></grandchild> </child> </parent>，无论他们是儿童还是孙子等。

因此，它将选择孩子和孙子，并进一步在树下。

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

CSS父级和子级选择器正确的语法

2 个答案: