Как добавить определенный класс в CSS

Question

если я добавлю класс css в свой div, он будет перезаписан с помощью v-slot-tradeMatrixLayout.Как я могу указать этот класс конкретно в моем файле CSS, чтобы вызывать только это.TradeMatrixLayout передается VerticalLayout.

Это будет рассмотрено в chrome

<div class="v-slot v-slot-tradeMatrixLayout">

И это мой CSS-файл

.tradeMatrixLayout{
 margin-left: 15px !important;
}

Как div может вызвать мойспециально написанное занятие?

Answer 1

Просто добавьте еще один CSS с этим классом CSS (v-слот). Например:

.v-slot{
     margin-right:5px;
}
.v-slot.tradeMatrixLayout{
    margin-left:50px
}

И ваш HTML будет выглядеть как

<div class="v-slot"></div>
<div class="v-slot tradeMatrixLayout"></div>

.v-slot{
        border: 3px solid blue;
        height: 50px;
        width: 50px;
        margin-left: 5px;
}
.v-slot.tradeMatrixLayout{
        margin-left:50px
}

<div class="v-slot"></div>
<div class="v-slot tradeMatrixLayout"></div>

Answer 2

Атрибут class может получать несколько CSS-классов, используя их имя и разделенные пробелом, как показано здесь .Для вашего случая вы можете добавить его следующим образом:

<div class="v-slot tradeMatrixLayout">

В этом примере вы добавляете 2 класса: v-slot и tradeMatrixLayout.

, если v-slot перезаписывает все, что выпытаетесь установить с tradeMatrixLayout, значит, вам нужно играть с Specificity .Таким образом, некоторые правила имеют большее значение, чем другие, даже если вы используете !important (представьте, что у вас есть 3 класса, которые используют !important, какой из них следует использовать?).Чем выше специфичность, тем важнее правило.

Следующий список типов селекторов увеличивается в зависимости от специфики:

• Селекторы типов (например, h1) и псевдо-элементы (например, :: before).
• Селекторы классов (например, .example), селекторы атрибутов (например, [type = "radio"]) и псевдоклассы (например, hover).
• Селекторы идентификаторов (например,> #example).

Если вы хотите, чтобы он был более специфичным, измените свой CSS на:

div.tradeMatrixLayout{
  margin-left: 15px;
}

из добавить его с идентификатором:

<div id="myDiv" class="v-slot tradeMatrixLayout">

div#myDiv.tradeMatrixLayout{
  margin-left: 15px;
}

Answer 3

Вы можете просто указать класс your в своем CSS следующим образом

.v-slot-tradeMatrixLayout {
    margin-left: 15px !important;
}

Answer 4

Селектор .class выбирает элементы с определенным атрибутом класса.Чтобы выбрать элементы с определенным классом, введите символ точки (.), А затем имя класса.Вы также можете указать, что класс должен затрагивать только определенные элементы HTML.Для этого начните с имени элемента, затем введите символ точки (.), А затем имя класса

Я не совсем понимаю, что вы явно хотите?Что у вас, кажется, хорошо?

v-slot v-slot-gewerkeMatrixLayout

Это относится к этим 2 классам, он не может использовать одни и те же элементы из обоих, так как он будет перезаписан.Но если у вас есть 2 разные инструкции, это должно работать

Answer 5

он должен заканчиваться вашим классом

[class$='tradeMatrixLayout']{
  color: red;
  margin-left: 15px !important;
}

Просто попробуйте код выше, он будет работать для вас

Answer 6

Вы также можете использовать javascript для добавления класса, манипулируя DOM.

function myFunction() {
    var el = document.getElementsByClassName("v-slot");
    el.classList.add("tradeMatrixLayout");
}