在另一个类中调用 CSS 类？答案

【问题标题】：Calling a CSS class inside another class?在另一个类中调用 CSS 类？
【发布时间】：2011-09-13 16:58:38
【问题描述】：

是否可以让一个 CSS 类引用另一个？而不是重新重写所有的css代码？

例如，我有这个：

.btn{
    /* Whatever btn related styles I have */
}

.btn:hover{
    box-shadow:0 0 4px black;
}

.btn:active{
    /* This is where I want to reference the '.red' class */
}

.red{
    /* There is a LOT of CSS code here for cross browser gradients */
}

问题是，我已经在某些地方使用了 .red 类，而且我还想将相同的渐变样式应用于所有具有 .btn 类的元素的“活动”状态。 .

如果您能帮助解决（不一定是我要求的方式），我将不胜感激...

【问题讨论】：

如果它适合您的用例，这就是 SASS 旨在解决的问题之一。

标签： css class

【解决方案1】：

为了调用类到另一个类。

.classA{
 
 }
 .classB .classA:hover{
   visibility: visible;
   /*classA -> onmouseover , classB -> visible*/
 }

 classB{
 visibility: hidden;
 }

示例代码在鼠标悬停时显示弹出窗口

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    /* Popup container - can be anything you want */
    .popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .popup:hover .popuptext{
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
    /*onmouseover .popup class .popuptext is visible*/
    }
    
    /* The actual popup */
    .popup .popuptext {
      visibility: hidden;
      width: 160px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -80px;
    }
    
    /* Popup arrow */
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    
    
    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
      from {opacity: 0;} 
      to {opacity: 1;}
    }
    
    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity:1 ;}
    }
    </style>
    </head>
    <body style="text-align:center">
    
    <h2>Popup</h2>
    
    <div class="popup">over me to toggle the popup!
      <span class="popuptext" id="myPopup">A Simple Popup!         </span>
    </div>
    
    
    
    </body>
    </html>

【讨论】：

将此应用于 OP 的问题并不是非常直接。
不应该是.classB{}（有句号），还是我遗漏了什么？

【解决方案2】：

你实际上不能做参考（CSS 的主要失败之一），但你可以这样做：

.btn:active, .red {
    /* Block A: Most (or all) of what used to just be in .red below */
}

.btn:active {
    /* Block B: Stuff *just* for .btn:active, if any */
}

.red {
    /* Block C: Stuff *just* for .red, if any */
}

逗号表示块 A 主体中的定义分别适用于这些选择器中的每个，因此它们适用于任何 ":active" 的 ".btn" 元素，并且分别适用适用于任何“.red”元素。

块 B 和块 C 是可选的。它们适用于您只想应用于给定选择器的任何定义。您通常会在块 A 之后列出这些，因为相同特异性的规则是自上而下应用的，因此您可以覆盖块 A 中您想要在块 B 或块 C 中的任何内容，这些块将“赢”。

【讨论】：

嗯...我理解这个概念，您正在使用 .btn:active 和 .red 类共享的共同属性...但是您看，内容是完全一样...也许我只是使用您的第一个声明？这样我只定义了一次属性，但它们同时适用于 .btn:active 和 .red 类？
@Abhishek：是的，就是这样；如果一切都应该完全相同，您只需定义第一条规则而不是其他两条。另外两个只是如果您需要定义一些仅特定于“.btn:active”或“.red”而不是另一个的其他属性。他们分享的一切都符合第一条规则。如果他们共享所有内容，那么这就是 only 规则。