Пользовательское редактирование CSS

Question

Я новичок в создании сайтов и не очень разбираюсь в кодировании, но мне нужно задать этот вопрос (думаю, это просто, но для меня это не так). У меня есть продукты на моей домашней странице, и у них есть границы. Мне нужно удалить границы, когда я нажимаю осмотреть и убрать галочку "border-style: solid;"все в порядке. Я пробовал много разных кодов в Custom CSS, но ни один из них не работал. Я думаю, я не могу взять правильный класс. Некоторые примеры:

.elementor-52 .elementor-element.elementor-element-c51ed78 .eael-product-grid .woocommerce {
    border-style: none;
}

или

.product .type-product .post-30 .status-publish .first .instock .product_cat-packages 
.product_cat-test .has-post-thumbnail .shipping-taxable .purchasable .product-type-simple {
    border-style: none;
}

Спасибо за ваше время.

Answer 1

Граница находится в вашем элементе списка с классом product

Чтобы избавиться от границы, вы можете использовать это:

li.product{
 border-style: none !important;
}

Вы также можете использовать border: none;или border-width: 0;

"важный" перезаписывает любые стили, даже если они вложены больше.

Это должно выглядеть так:

Если там нет стиля li.product, вы сделали что-то не так в своем css-файле или: старый стиль css все еще находится в вашем кэше. В Chrome вы можете сбросить кэш и перезагрузить, нажав Ctrl + F5