登录
当前位置： 首页 > 面试题库 >

少CSS：嵌套时滥用＆运算符？

陆城
2023-03-14
问题内容：

较少使用&运算符来增强嵌套]的可能性。

.header        { color: black;
  .navigation  { font-size: 12px;
    &.class    { text-decoration: none }
  }
}

这会导致&用父选择器替换，并导致实际选择器的权利与父选择器相结合：.header .navigation.class而不是常规附加，这将导致.class后代：.header .navigation .class。

现在，还可以执行以下操作：

.header        { color: black;
  .navigation  { font-size: 12px;
    #some-id & .foo   { text-decoration: none }
  }
}

这将导致以下结果：#some-id .header .navigation .foo在此处尝试。发生替换，并且我在父选择器之前 添加
了一个选择器（#some-id）。

除了我永远不会以这种方式编写代码这一事实之外，因为这可能会立即使您的样式表混乱，我的问题是：

由于未记录此功能，因此它是功能还是更可能是错误？
有哪些可能的副作用？


问题答案：

自从我们在您提到的问题中遇到它以来，我还一直在思考这种用法。虽然我不能确切地回答这是“错误”的用法&（BoltClock似乎提出了一个非错误的很好的论点），但我想为它的价值辩护（从逻辑上讲这
不是 错误）立场）。

但是，在逻辑参数之前，我确实找到了另一个简短的单引号（在“嵌套规则”部分），这似乎表明它至少并非并非意料之外：“
&表示当前选择器的父级”。而已。正如BoltClock所论证的，在前面还是后面似乎都没有关系。这样做的唯一目的是成为到目前为止的“选择器父对象”的占位符。总是将其与该语言的“嵌套”用法结合使用的事实表明，该语言旨在指定嵌套的完整选择器字符串，直到嵌套所在的嵌套点为止。该字符串的使用方式（前置或附加）将由编码器决定。

现在，您提到（和前面提到的）您“永远不会以这种方式编码”，但是我发现自己看到了看起来非常有价值的用法。考虑以下参数。

插图的HTML设置

为了说明起见，假设在body元素上动态设置了三个可能的类（“浅”，“中”，“暗”主题），这些类会更改网站的“外观”。我们有两列，还有一些不同类型的链接，我们想要的风格（textLink，picLink，textWithIconLink）在不同的为每个主题各列。

<body class="light">
  <div class="leftCol">
     <a class="textLink"></a>
     <a class="picLink"></a>
     <a class="textWithIconLink"></a>
  </div>
  <div class="rightCol">
     <a class="textLink"></a>
     <a class="picLink"></a>
     <a class="textWithIconLink"></a>
  </div>
</body>

现在要问的问题是，仅查看链接，以下两种方法，即…

  1. LESS中的代码更少
  2. 最佳组织LESS中的代码
  3. 在CSS中输出更少的代码
  4. 最好组织输出的CSS

“最佳”可能有些主观。我让您自己从下面权衡这些证据。

选项＃1典型嵌套

更少 （约99行代码）

/*Light Color Theme */
    .light {
      .leftCol {
        .textLink {
          color: fooL1;
          &:hover { color: barL1;}
        } 
        .picLink {
          background-image: url(/fooL1.jpg);
          &:hover { background-image: url(/barL1.jpg);}
        }
        .textWithIconLink {
          color: fooL2;
          background-image: url(/fooL2.jpg);
          &:hover { color: barL2; background-image: url(/barL2.jpg);}
        }   
      }
      .rightCol {
        .textLink {
          color: fooL3;
          &:hover { color: barL3;}
        } 
        .picLink {
          background-image: url(/fooL3.jpg);
          &:hover { background-image: url(/barL3.jpg);}
        }
        .textWithIconLink {
          color: fooL4;
          background-image: url(/fooL4.jpg);
          &:hover { color: barL4; background-image: url(/barL4.jpg);}
        }   
      }
    }
/*Medium Color Theme */
    .medium {
      .leftCol {
        .textLink {
          color: fooM1;
          &:hover { color: barM1;}
        } 
        .picLink {
          background-image: url(/fooM1.jpg);
          &:hover { background-image: url(/barM1.jpg);}
        }
        .textWithIconLink {
          color: fooM2;
          background-image: url(/fooM2.jpg);
          &:hover { color: barM2; background-image: url(/barM2.jpg);}
        }   
      }
      .rightCol {
        .textLink {
          color: fooM3;
          &:hover { color: barM3;}
        } 
        .picLink {
          background-image: url(/fooM3.jpg);
          &:hover { background-image: url(/barM3.jpg);}
        }
        .textWithIconLink {
          color: fooM4;
          background-image: url(/fooM4.jpg);
          &:hover { color: barM4; background-image: url(/barM4.jpg);}
        }   
      }
    }
/*Dark Color Theme */
    .dark {
      .leftCol {
        .textLink {
          color: fooD1;
          &:hover { color: barD1;}
        } 
        .picLink {
          background-image: url(/fooD1.jpg);
          &:hover { background-image: url(/barD1.jpg);}
        }
        .textWithIconLink {
          color: fooD2;
          background-image: url(/fooD2.jpg);
          &:hover { color: barD2; background-image: url(/barD2.jpg);}
        }   
      }
      .rightCol {
        .textLink {
          color: fooD3;
          &:hover { color: barD3;}
        } 
        .picLink {
          background-image: url(/fooD3.jpg);
          &:hover { background-image: url(/barD3.jpg);}
        }
        .textWithIconLink {
          color: fooD4;
          background-image: url(/fooD4.jpg);
          &:hover { color: barD4; background-image: url(/barD4.jpg);}
        }   
      }
    }

CSS输出 （大约87行输出，按主题排列）

 /*Light Color Theme */
.light .leftCol .textLink { color:fooL1; }
.light .leftCol .textLink:hover { color:barL1; }
.light .leftCol .picLink { background-image:url(/fooL1.jpg); }
.light .leftCol .picLink:hover { background-image:url(/barL1.jpg); }
.light .leftCol .textWithIconLink {
  color:fooL2;
  background-image:url(/fooL2.jpg);
}
.light .leftCol .textWithIconLink:hover {
  color:barL2;
  background-image:url(/barL2.jpg);
}
.light .rightCol .textLink { color:fooL3; }
.light .rightCol .textLink:hover { color:barL3; }
.light .rightCol .picLink { background-image:url(/fooL3.jpg); }
.light .rightCol .picLink:hover { background-image:url(/barL3.jpg); }
.light .rightCol .textWithIconLink {
  color:fooL4;
  background-image:url(/fooL4.jpg);
}
.light .rightCol .textWithIconLink:hover {
  color:barL4;
  background-image:url(/barL4.jpg);
}
/*Medium Color Theme */
.medium .leftCol .textLink { color:fooM1; }
.medium .leftCol .textLink:hover { color:barM1; }
.medium .leftCol .picLink { background-image:url(/fooM1.jpg); }
.medium .leftCol .picLink:hover { background-image:url(/barM1.jpg); }
.medium .leftCol .textWithIconLink {
  color:fooM2;
  background-image:url(/fooM2.jpg);
}
.medium .leftCol .textWithIconLink:hover {
  color:barM2;
  background-image:url(/barM2.jpg);
}
.medium .rightCol .textLink { color:fooM3; }
.medium .rightCol .textLink:hover { color:barM3; }
.medium .rightCol .picLink { background-image:url(/fooM3.jpg); }
.medium .rightCol .picLink:hover { background-image:url(/barM3.jpg); }
.medium .rightCol .textWithIconLink {
  color:fooM4;
  background-image:url(/fooM4.jpg);
}
.medium .rightCol .textWithIconLink:hover {
  color:barM4;
  background-image:url(/barM4.jpg);
}
/*Dark Color Theme */
.dark .leftCol .textLink { color:fooD1; }
.dark .leftCol .textLink:hover { color:barD1; }
.dark .leftCol .picLink { background-image:url(/fooD1.jpg); }
.dark .leftCol .picLink:hover { background-image:url(/barD1.jpg); }
.dark .leftCol .textWithIconLink {
  color:fooD2;
  background-image:url(/fooD2.jpg);
}
.dark .leftCol .textWithIconLink:hover {
  color:barD2;
  background-image:url(/barD2.jpg);
}
.dark .rightCol .textLink { color:fooD3; }
.dark .rightCol .textLink:hover { color:barD3; }
.dark .rightCol .picLink { background-image:url(/fooD3.jpg); }
.dark .rightCol .picLink:hover { background-image:url(/barD3.jpg); }
.dark .rightCol .textWithIconLink {
  color:fooD4;
  background-image:url(/fooD4.jpg);
}
.dark .rightCol .textWithIconLink:hover {
  color:barD4;
  background-image:url(/barD4.jpg);
}

选项＃2最终目标分组

我将其命名为“最终目标分组”，因为这确实是我使用&添加父选择器的另一种方式看到的方式。现在，一个编码是根据实际被设置样式的最终目标元素进行的。

更少 （约88行代码）

/*Links */
/*Text  Links*/
.textLink {
  .light .leftCol &  {
      color: fooL1;
      &:hover { color: barL1;}
    }      
  .light .rightCol &  {
      color: fooL3;
      &:hover { color: barL3;}
    } 
  .medium .leftCol &  {
      color: fooM1;
      &:hover { color: barM1;}
    } 
  .medium .rightCol &  {
      color: fooM3;
      &:hover { color: barM3;}
    } 
  .dark .leftCol &  {
      color: fooD1;
      &:hover { color: barD1;}
    } 
  .dark .rightCol &  {
      color: fooD3;
      &:hover { color: barD3;}
    } 
}
/*Picture Links */
.picLink {
  .light .leftCol &  {
      background-image: url(/fooL1.jpg);
      &:hover { background-image: url(/barL1.jpg);}
    } 
  .light .rightCol &  {
      background-image: url(/fooL3.jpg);
      &:hover { background-image: url(/barL3.jpg);}
    } 
  .medium .leftCol &  {
      background-image: url(/fooM1.jpg);
      &:hover { background-image: url(/barM1.jpg);}
    } 
  .medium .rightCol &  {
      background-image: url(/fooM3.jpg);
      &:hover { background-image: url(/barM3.jpg);}
    } 
  .dark .leftCol &  {
      background-image: url(/fooD1.jpg);
      &:hover { background-image: url(/barD1.jpg);}
    } 
  .dark .rightCol &  {
      background-image: url(/fooD3.jpg);
      &:hover { background-image: url(/barD3.jpg);}
    } 
}
/*Text with Icon Links */
.textWithIconLink {
  .light .leftCol &  {
      color: fooL2;
      background-image: url(/fooL1.jpg);
      &:hover { color: barL2; background-image: url(/barL1.jpg);}
    } 
  .light .rightCol &  {
      color: fooL4;
      background-image: url(/fooL3.jpg);
      &:hover { color: barL4;  background-image: url(/barL3.jpg);}
    } 
  .medium .leftCol &  {
      color: fooM2;
      background-image: url(/fooM1.jpg);
      &:hover { color: barM2; background-image: url(/barM1.jpg);}
    } 
  .medium .rightCol &  {
     color: fooM4;
      background-image: url(/fooM3.jpg);
      &:hover { color: barM4; background-image: url(/barM3.jpg);}
    } 
  .dark .leftCol &  {
     color: fooD2;
      background-image: url(/fooD1.jpg);
      &:hover { color: barD2; background-image: url(/barD1.jpg);}
    } 
  .dark .rightCol &  {
      color: fooD4;
      background-image: url(/fooD3.jpg);
      &:hover { color: barD4; background-image: url(/barD3.jpg);}
    } 
}

CSS （大约88行输出（由于多了一条注释），由最终目标元素组成；但是请注意，由于类结构的原因，仍然存在一个按主题划分的子组织）

/*Links*/
/*Text  Links*/
.light .leftCol .textLink { color:fooL1; }
.light .leftCol .textLink:hover { color:barL1; }
.light .rightCol .textLink { color:fooL3; }
.light .rightCol .textLink:hover { color:barL3; }
.medium .leftCol .textLink { color:fooM1; }
.medium .leftCol .textLink:hover { color:barM1; }
.medium .rightCol .textLink { color:fooM3; }
.medium .rightCol .textLink:hover { color:barM3; }
.dark .leftCol .textLink { color:fooD1; }
.dark .leftCol .textLink:hover { color:barD1; }
.dark .rightCol .textLink { color:fooD3; }
.dark .rightCol .textLink:hover { color:barD3; }
/*Picture Links */
.light .leftCol .picLink { background-image:url(/fooL1.jpg); }
.light .leftCol .picLink:hover { background-image:url(/barL1.jpg); }
.light .rightCol .picLink { background-image:url(/fooL3.jpg); }
.light .rightCol .picLink:hover { background-image:url(/barL3.jpg); }
.medium .leftCol .picLink { background-image:url(/fooM1.jpg); }
.medium .leftCol .picLink:hover { background-image:url(/barM1.jpg); }
.medium .rightCol .picLink { background-image:url(/fooM3.jpg); }
.medium .rightCol .picLink:hover { background-image:url(/barM3.jpg); }
.dark .leftCol .picLink { background-image:url(/fooD1.jpg); }
.dark .leftCol .picLink:hover { background-image:url(/barD1.jpg); }
.dark .rightCol .picLink { background-image:url(/fooD3.jpg); }
.dark .rightCol .picLink:hover { background-image:url(/barD3.jpg); }
/*Text with Icon Links */
.light .leftCol .textWithIconLink {
  color:fooL2;
  background-image:url(/fooL1.jpg);
}
.light .leftCol .textWithIconLink:hover {
  color:barL2;
  background-image:url(/barL1.jpg);
}
.light .rightCol .textWithIconLink {
  color:fooL4;
  background-image:url(/fooL3.jpg);
}
.light .rightCol .textWithIconLink:hover {
  color:barL4;
  background-image:url(/barL3.jpg);
}
.medium .leftCol .textWithIconLink {
  color:fooM2;
  background-image:url(/fooM1.jpg);
}
.medium .leftCol .textWithIconLink:hover {
  color:barM2;
  background-image:url(/barM1.jpg);
}
.medium .rightCol .textWithIconLink {
  color:fooM4;
  background-image:url(/fooM3.jpg);
}
.medium .rightCol .textWithIconLink:hover {
  color:barM4;
  background-image:url(/barM3.jpg);
}
.dark .leftCol .textWithIconLink {
  color:fooD2;
  background-image:url(/fooD1.jpg);
}
.dark .leftCol .textWithIconLink:hover {
  color:barD2;
  background-image:url(/barD1.jpg);
}
.dark .rightCol .textWithIconLink {
  color:fooD4;
  background-image:url(/fooD3.jpg);
}
.dark .rightCol .textWithIconLink:hover {
  color:barD4;
  background-image:url(/barD3.jpg);
}

结论思想

其他一些注意事项：

首先，大多数主题颜色（可能还有其他主题方面）都将设置有变量，即使使用上述选项2，也可以按主题将其分组到LESS代码的顶部，因此具有输出的主题结构CSS本身散布在代码中不一定是不好的。

其次，在任何主题代码之上都定义了一种元素类型的任何“标准”代码。我的示例并未显示这一点，但是说所有.textLink元素都已text- decoration: none;设置。这将在选项＃2下发生一次，而没有任何其他选择器代码，并且将出现在下面所有主题更改的上方。对于选项1，我需要设置一个新的，未 嵌套的
.textLink选择器（至少另一行代码），以将其应用于所有主题链接，并且该类的“基础”代码将再次位于与以下位置无关的位置主题链接信息的其余代码为。

第三，作为开发人员，如果我遇到问题picLinks（页面上的特定类型的元素），则选择＃2可以更轻松地检查我的代码中存在问题的元素，因为我的所有代码主题恰到好处。

显然，人们如何希望最终的LESS和CSS组织起来将成为人们如何看待这一价值的主要因素。
我在这里的观点只是说明存在一个非常有用的逻辑理由，&以这种方式使用父级选择器添加到&引用中。



 类似资料：
  • 更少的CSS嵌套类

    问题内容： 我正在使用LESS改进我的CSS，并试图将一个类嵌套在一个类中。层次结构相当复杂，但是由于某种原因，我的嵌套无法正常工作。我有这个： 我无法上班。它只是显示位。如果我这样做就可以了： 我想窝在虽然。有任何想法吗？ 问题答案： 该角色具有的功能关键字，居然（事我不知道在写答案的时刻）。可以这样写： 并且将生成的CSS如下所示： 作为记录，@ grobitto是第一个发布此信息的人。 [原

  • 使用嵌套三元运算符

    问题内容： 我一直在尝试使用嵌套形式，如下所示： 但似乎我缺少了一些东西。谁能协助我该怎么做？ 问题答案： 将其括在括号中： 甚至更好的是，使用适当的/ 语句（出于可维护性）： 但是，正如其他人指出的那样：使用起来更简单：

  • 嵌套CSS类

    问题内容： 我可以做以下事情吗？ 问题答案： 香草CSS不可能。但是，您可以使用类似： Sass使CSS再次变得有趣。Sass是CSS3的扩展，添加了嵌套规则，变量，mixins，选择器继承等。使用命令行工具或网络框架插件将其转换为格式良好的标准CSS。 要么 不用构造长的选择器名称来指定继承，在Less中，您可以简单地将选择器嵌套在其他选择器中。这样可以使继承更清晰，样式表更短。 例：

  • 嵌套 CSS 规则

    css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID： #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE } 像这种情况，sass可以让你只写一遍，且

  • 了解嵌套的PHP三元运算符

    问题内容： 我不明白该输出（“ ”）是怎么来的？ 我不明白为什么打印“ ”。 问题答案： 您需要将三元条件括起来： 返回： 如您所愿。 请参阅PHP三元运算符帮助的“三元运算符”底部的注释。 表达式从左到右进行求值。因此，您实际上得到了： 因此，您得到： 然后 然后 然后 等等。 请记住，PHP是动态类型的，并将任何非零，非空值都视为TRUE。

  • CSS 分组和嵌套

    Grouping Selectors 在样式表中有很多具有相同样式的元素。h1 { color:green; } h2 { color:green; } p { color:green; } 为了尽量减少代码，你可以使用分组选择器。 每个选择器用逗号分隔. 在下面的例子中，我们对以上代码使用分组选择器：h1,h2,p { color:green; } 嵌套选择器 它可能适用于选择器内部的选择器的样

相关阅读

Python减少嵌套循环嵌套数组上的Swift相等运算符在PHP中相应的嵌套三元运算符？在CSS中嵌套@media规则Powershell ConvertTo-JSON缺少嵌套级别

相关文章

MySQL算术运算符Python算术运算符Java算术运算符C语言循环嵌套位运算的应用

相关问答

少运算循环的时间复杂度gate-jape规则嵌套的'contains'运算符-正确的语法嵌套框算法 - 基于嵌套娃娃，但根本不同？多重嵌套for循环的时间复杂度是多少？使用Cosmos DB CoreSQLAPI使用嵌套JSON嵌套JS

相关工具

UITable嵌套UITable纵向Table里嵌套横向TableCSS TesterCSS PatcherCSS ToolTip

相关文档

揭秘 CSSCSS 基础教程CSS 创作指南CSS 入门教程CSS 学习笔记
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.