CSS選擇輸入其中父母不是「類名」

我有這個規則在我的樣式表：CSS選擇輸入其中父母不是「類名」

input:not([type='button']):not([type='submit']):not([type='checkbox']):not([type='radio']), 
select { 
    padding:8px; 
    width:224px; 
    border:1px solid #CCC; 
    border-radius:5px; 
}

這個目標我的網頁上的所有文本字段，但我需要防止其影響它們內部的輸入具有某個類的元素。我正在使用ckeditor，並且不需要影響它創建的對話框中的字段 - 這意味着我不能只是在之後覆蓋規則。

我已經嘗試添加:not(.cke_editor_pageContent_dialog input)但這並不明顯的原因工作。我似乎無法在任何地方找到答案

來源

2012-04-14 ollie

你就不能加在他們身上共同的課嗎？ – kapa 2012-04-14 11:02:23

我不敢相信我沒有想到 - 是的，我可以，雖然有很多地方我需要添加它，所以如果有一種方法可以使用它，它會很好：not（） – ollie 2012-04-14 11:07:46

這樣一個長而複雜的選擇器很快就會變得無法維護。從長遠來看，添加這些類可能會更容易，更快捷。 – kapa 2012-04-14 11:10:58

這樣一個漫長而複雜的選擇將迅速成爲從長遠來看難以維護。

在想要以相同方式設計樣式的元素上添加常見類會更容易和更清晰。

.text-field { 
    padding:8px; 
    width:224px; 
    border:1px solid #CCC; 
    border-radius:5px; 
}

來源

2012-04-14 11:15:41 kapa

正確的做法可能是採用「白名單」方法而不是「黑名單」方法（告訴瀏覽器什麼不是選擇）。

一方面，它避免了你所遇到的問題。此外，:not()選擇器不能在IE8或更低版本中工作（不確定是否重要）。最後（只是一個猜測）我不得不相信，複雜的:not陳述是評估更昂貴。

我會建議把明確的類名放在問題的元素上，或者更好的做法是將所有非編輯元素包裝到元素中，並將其用作樣式容器。

<div class="myStyles"> 
    <!-- elements that should be styled --> 
    <input type="text" /> 
</div> 

.myStyles input[type="text"]{ 
    padding:8px; 
    width:224px; 
    border:1px solid #CCC; 
    border-radius:5px; 
}

我意識到這可能需要更多的標記，但它可能會更容易在長期維護。

來源

2012-04-14 11:06:52

我知道已經給出了更好的答案，但只是爲了記錄，並且增加了Tim的答案。

如果你想用，要麼有type="text"或沒有type屬性在所有輸入工作，使用這個選擇：

input:not([type]), input[type='text']

來源

2012-04-14 11:29:55

CSS選擇輸入其中父母不是「類名」

回答

相關問題