CSS 不是选择器问题

Question

我有一个包含 <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;
}}

Answer 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;
}

CSS 不是选择器问题

CSS not selector issue

css

prestashop

prestashop-1.7