Блог

Главная - Вопросы по программированию - Библиотека утилит CSS переопределяет мой стиль кнопок?

Библиотека утилит CSS переопределяет мой стиль кнопок?

#css

#css

Вопрос:

Я пытаюсь создать стиль кнопки, написав свой собственный css, но также используя Tailwind для других стилей.

Мой код для кнопки выглядит следующим образом, но некоторые элементы зачеркнуты.

 button {
    margin-left: 10px; /*crossed out*/
    padding: 5px 25px; /*crossed out*/
    background-color:  rgba(2,68,62,1); /*crossed out*/
    border: none;
    border-radius: 10px;
    cursor: pointer; /*crossed out*/
    transition: all 0.3s ease 0s;
}

Это потому, что у Tailwind уже есть значения по умолчанию для button ? Я знаю, что использование !important — плохая практика, так как мне это исправить? Мой html для кнопки cta:

 <a class="cta" href="#"><button>CONTACT</button></a>

Если я ссылаюсь .cta на свой css, я не могу изменить фактический текст КОНТАКТА; Я хотел использовать text-decoration: none .

Я установил a * в верхней части своего css.

 * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #b3b3b4;
}

Комментарии:

1. убедитесь, что <link> ваш пользовательский файл css соответствует стилям tailwind

2. Итак style sheets , в порядке возрастания они связаны?

3. В грубом смысле, да, DOM и его стили применяются в порядке возрастания. Но это еще не все, например, специфика . Я рекомендую вам прочитать руководство по mdn- developer.mozilla.org/en-US/docs/Web/CSS/Specificity

4. Если tailwind styles имеет более конкретное определение, чем ваши стили, стоящие за конкретным определением, например, этот стиль в tailwind button . синий {цвет: синий} и вы написали кнопку { цвет: черный}, чем браузер, чтобы дать приоритет более конкретному определению, мой совет: используйте инструменты разработчика и найдите класс tailwind и используйте ту же спецификацию classname