僅使用CSS，如何選擇div/class中的html元素，但排除一些嵌套的div /類

這是一個簡化的頁面結構，我想選擇「page」中的所有圖像-div和封閉元素，但不是那些處於「keepoffa」或「keepoffb」狀態的人。僅使用CSS，如何選擇div/class中的html元素，但排除一些嵌套的div /類

<!DOCTYPE html> 
<html lang="en"> 
    <body> 
    <div class="page"> 
     <img/> <!-- OK --> 
     <div class="keepoffa"> 
      <img/> <!-- never take this--> 
     </div> 
     <div class="keepoffb"> 
      <img/> <!-- never take this--> 
     </div> 
     <img/> <!-- OK --> 
     <div class="subpage"> 
      <img/> <!-- OK --> 
      <ul> 
       <li> 
        <img/> <!-- OK --> 
       </li> 
      </ul> 
     </div> 
     <ul> 
      <li> 
       <img/> <!-- OK --> 
      </li> 
     </ul> 
    <div> 
    </body> 
</html>

這裏是我曾經想過：

.page img:not(.keepoffa):not(.keepoffb) { 
    max-width: 300px;   
}

但不必要的div不排除。

如何有效地選擇圖像但排除那些不需要的div內的圖像？僅限CSS。

來源

2016-02-05 Marcel

您不能同時使用兩個僞選擇器（並且您的選擇器不正確）。

編輯：也許最簡單的方法是這樣的：

.page img { 
     max-width: 300px; 
    } 

    .keepoffa img, .keepoffb img { 
     max-width: initial; 
    }

來源

2016-02-05 14:39:11

啊是啊！我沒有想到這個！大聲笑。 –

這也需要。頁面> img新增 – Mike

@PraveenKumar是的:) CSS往往是相當時髦 –

試試這個：

.page>img, 
.page div:not(.keepoffa):not(.keepoffb) img { 
    max-width: 300px;   
}

來源

2016-02-05 15:33:11

使用>操作員選擇.page div的孩子。而.subpage img到另一個圖像

.page > img, 
 
.subpage img{ 
 
    border: 1px solid red; 
 
}

<div class="page"> 
 
     <img src="http://placehold.it/100x100"/> <!-- OK --> 
 
     <div class="keepoffa"> 
 
      <img src="http://placehold.it/100x100"/> <!-- never take this--> 
 
     </div> 
 
     <div class="keepoffb"> 
 
      <img src="http://placehold.it/100x100"/> <!-- never take this--> 
 
     </div> 
 
     <img src="http://placehold.it/100x100"/> <!-- OK --> 
 
     <div class="subpage"> 
 
      <img src="http://placehold.it/100x100"/> <!-- OK --> 
 
     </div> 
 
<div>

來源

2016-02-05 15:39:01 Ferrrmolina

謝謝，這是一個好主意。不幸的是，真正的頁面比我上面簡單的例子更復雜。因此，與直接的兒童選擇器合作並不容易。我將不得不爲每個可能的佈局路徑包含路徑。這會變得太複雜。我會稍微更新一下這個例子來更好地表達這一點。 – Marcel

僅使用CSS，如何選擇div/class中的html元素，但排除一些嵌套的div /類

回答

相關問題