Блог

Главная - Вопросы по программированию - CSS не проблема с селектором

CSS не проблема с селектором

#css #prestashop #prestashop-1.7

#css #prestashop #prestashop-1.7

Вопрос:

У меня есть страница, на <body id="index"> которую я хочу исключить влияние какого-либо css. Если я попробую это, это не сработает и просто повлияет на все страницы моего сайта.

 @media (max-width: 991px){
body:not(#index) #products .product-miniature .product-container div.left-block .product-image img, .featured-products .product-miniature .product-container div.left-block .product-image img, .product-accessories .product-miniature .product-container div.left-block .product-image img, .product-miniature .product-container div.left-block .product-image img, .category-products .product-miniature .product-container div.left-block .product-image img{
    width: 100px;
    height: 100px;
}}

@media (max-width: 991px){
body:not(#index) #products .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, .product-miniature, .category-products .product-miniature{
    height: 175px;
}}

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

1. попробуйте использовать тег span внутри тела, выбрав его в медиа

2. @Giuppox я не могу изменить тело, поскольку оно является частью ядра prestashop

Ответ №1:

Not применяется только к выбору, в котором он находится. Это то же самое поведение, что и любая другая часть селектора. Вам нужно сбросить его для каждого из них в списке. Например, как вы сделали для img как часть селектора.

Вот первое объявление. Я поместил их в отдельные строки здесь, чтобы было немного легче читать. Вам не нужно этого делать, но вам нужно поставить body:not(#index) перед всеми ними.

 body:not(#index) #products .product-miniature .product-container 

div.left-block .product-image img, 
body:not(#index) .featured-products .product-miniature .product-container div.left-block .product-image img, 
body:not(#index) .product-accessories .product-miniature .product-container div.left-block .product-image img, 
body:not(#index) .product-miniature .product-container div.left-block .product-image img, body:not(#index) .category-products .product-miniature .product-container div.left-block .product-image img {
    width: 100px;
    height: 100px;
}