Вызов класса CSS внутри другого класса?

ProgramBox

Вызов класса CSS внутри другого класса?

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#css #class

#css #класс

Вопрос:

Возможно ли, чтобы один класс 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…

Если вы можете помочь решить (это не обязательно должно быть так, как я просил) это, я был бы очень признателен…

Ответ №1:

На самом деле вы не можете создать ссылку (один из основных недостатков 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 применяются отдельно к каждому из этих селекторов, и поэтому они применяются к любым элементам «.btn», которые являются «:активными», и отдельно применяются к любым элементам «.red».

Блок B и блок C являются необязательными. Они предназначены для любых определений, которые вы хотите применить только к данному селектору. Обычно вы перечисляете их после блока A, потому что правила одинаковой специфичности применяются сверху вниз, поэтому вы можете переопределить все, что хотите, из блока A в блоке B или блоке C, и эти блоки «выиграют».

1. Хммм… Я понимаю концепцию, вы используете общие атрибуты, которые будут использоваться обоими классами .btn:active и .red… Но вы видите, содержимое ТОЧНО такое же… Возможно, я просто использую ваше первое объявление? Таким образом, я определяю атрибуты только один раз, но они применяются к классам .btn:active и .red одновременно?

2. @Abhishek: Да, именно так; если все должно быть точно так же, вы просто определяете первое правило, а не два других. Два других предназначены только на тот случай, если вам нужно затем определить некоторые дополнительные свойства, которые специфичны только для «.btn: active» или «.red», но не для других. Все, что они разделяют, подпадает под первое правило. Если они разделяют все, то это единственное правило.

Ответ №2:

Для вызова класса другому классу.

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