在…的背景下。NET MVC(但這也適用于其他類似的技術(shù))，讓:

視圖樹，例如頁面視圖FileUploadPage及其子分部視圖FileDropZone，它們有一個標識它們的視圖& quot鍵入& quot在其根節(jié)點上: FileUploadPage.cshtml:

<div class="view-fileuploadpage">
    <h2>File upload page view</h2>
    @Html.Partial("FileDropZone")
</div>

FileDropZone.cshtml:

<div class="view-filedropzone">
    File drop zone partial view
</div>

一些我希望只應用于視圖自身元素而不是全局元素的CSS規(guī)則: 像這樣:

.view-fileuploadpage h2 {
    /* Spécific to the view FileUploadPage */
}

但不是這樣的:

h2 {
    /* Global, not what I want */
}

我喜歡這種方式，因為它避免了CSS中其他頁面由于不必要的全局選擇器而造成的干擾。

然而，這有一個問題:特定于視圖的CSS規(guī)則適用于視圖本身的元素，但也適用于作為子視圖包含的任何其他視圖。在上面的例子中，視圖FileDropZone繼承了應該特定于視圖FileUploadPage的規(guī)則，這是一個不希望的結(jié)果。

所以我的問題是:我怎樣才能使CSS規(guī)則不被應用到子視圖上呢？

我可以用& quot直接子& quot操作員在我的選擇器中指定完整的& quot路徑& quot到我想要樣式的元素，就像這樣:

.view-fileuploadpage > h2 {
    /* Applies to the h2 of the view FileUploadPage */
    /* DOes NOT apply to any h2 that would exist in a child view of FileUploadPage */
}

但是這會使代碼難以維護，因為每次視圖中移動或修改標記時，選擇器都必須更新。

我在JavaScript和查詢選擇器上也遇到了同樣的問題，但是我想找到CSS的解決方案也能解決JavaScript的問題。

您可以使用:not()偽類來取消選擇特定子代中的孫代。

.view-fileuploadpage h2:not(.file-drop-zone *):not(.more-children *){
  color: #f00;
  }

這將顏色分配給所有h2元素，不包括:not()選擇器中指定的類中的元素。

CSS文件將需要更新新的孩子的類，如果有的話。

最好的解決方案是將不應獲得樣式的view-fileuploadpage或parent div的所有內(nèi)容包裝起來，并使用這個w rapper的類作為單個選擇器。這樣，文件將不需要不斷更新，所有未來的子代和孫代都將添加到包裝器中。

因此，我們沒有:

<div class='view-fileuploadpage-one'>
      <h2>Container</h2>
      <p>...</p>
     
      <div class='file-drop-zone'>
        <h2>file drop zone</h2>
        ...
      </div>
    
      <div class='more-children'>
        <h2>More children</h2>
        ...
      </div>
   </div>

您可以選擇:

<div class='view-fileuploadpage-two'>
    <h2>Container</h2>
    <p>...</p>
    <div class='content-wrapper'>
    <!--   this wrapper will contain everything else -->
      <div class='file-drop-zone'>
        ...
      </div>

      <div class='more-children'>
        ...
      </div>
    </div>
   </div>
  </div>

這將或多或少:

<div class='view-fileuploadpage-two'>
    ...
  <div class='content-wrapper'>
    ...
  </div>
</div>

請看看我對這支筆的想法。