覆蓋被迫wordpress CSS樣式

我正在考慮把這個放在wordpress stackexchange網站上，但它必須做更多的CSS和Wordpress。覆蓋被迫wordpress CSS樣式

但是，除非我必須進入一些插件css文件來定製css，那麼我必須去那裏問這個問題嗎？

我正在尋找覆蓋一些！重要的css樣式來自我的主題（Genesis框架與自定義最小專業兒童主題）或重力形式插件。

You'll see here on this page我有一個窗口大小的窗體。在500像素，我希望所有的選擇和輸入字段的寬度爲100％。我在我的媒體查詢中找到了特定的位置，並將代碼放置在那裏。但是因爲寬度：95％！重要;已經設置了一些地方（不是在我的樣式表中）我的100％被95％覆蓋。

這些都是風格我想覆蓋

.gform_wrapper .ginput_complex input[type=text], 
.gform_wrapper .ginput_complex input[type=url], 
.gform_wrapper .ginput_complex input[type=email], 
.gform_wrapper .ginput_complex input[type=tel], 
.gform_wrapper .ginput_complex input[type=number], 
.gform_wrapper .ginput_complex input[type=password], 
.gform_wrapper .ginput_complex select { 
    width: 95% !important; 
} 

.gform_wrapper .ginput_complex .ginput_right input[type=text], 
.gform_wrapper .ginput_complex .ginput_right input[type=url], 
.gform_wrapper .ginput_complex .ginput_right input[type=email], 
.gform_wrapper .ginput_complex .ginput_right input[type=tel], 
.gform_wrapper .ginput_complex .ginput_right input[type=number], 
.gform_wrapper .ginput_complex .ginput_right input[type=password], 
.gform_wrapper .ginput_complex .ginput_right select { 
    width: 95% !important; 
}

這是我的整體風格改寫我想適用於所有形式

@media only screen and (max-width: 500px) 
input, select, textfield { 
width: 100%!important; 
}

因爲這是WordPress的我不沒有HTML，但我已經截取了CSS樣式的截圖（您也可以右鍵單擊其中一個輸入並查看）。

enter image description here

我的問題是我如何覆蓋與我的媒體查詢設置寬度這些頂級的風格？

我玩過這些款式，但顯然我錯過了一些東西？ Hoepfully？

UPDATE：

好了，所以我包括兩套不同的亞歷山大·奧馬拉&法比奧佈局風格，但既不工作？

我已經評論過此代碼片段的Alexander O'Mara代碼。但是你可以看到我是如何實現它們的。

@media only screen and (max-width: 500px) { 

    a.alignright, img.alignright, .wp-caption.alignright { 
      width: 100%; 
    } 

    .gform_wrapper ul li.gfield { 
     width: 100%!important; 
    } 

    .ginput_left, .ginput_right { 
     width: 100%!important; 
     margin-top: 1.5em; 
    } 

    input, select, textfield { width: 100%!important;} 

    .ui-datepicker-trigger { display: none;} 

    .gform_wrapper .ginput_complex input[type="text"] {width: 100%!important;} 

    .header-image .site-title a { 
     background-size: contain !important; 
     margin: 0 auto; 
     max-width: 300px; 
     padding: 11% 0; 
    } 


    /*.apply-now-form_wrapper .top_label input.medium, 
    .apply-now-form_wrapper .top_label select.medium { 
     width: 100%!important; 
     border: 2px solid blue; 
    }*/ 

    html .gform_wrapper .ginput_complex input[type=text], 
    html .gform_wrapper .ginput_complex input[type=url], 
    html .gform_wrapper .ginput_complex input[type=email], 
    html .gform_wrapper .ginput_complex input[type=tel], 
    html .gform_wrapper .ginput_complex input[type=number], 
    html .gform_wrapper .ginput_complex input[type=password], 
    html .gform_wrapper .ginput_complex select { 
     width: 100% !important; 
     border: 2px solid red !important; 
    } 

}

我設定，讓當施加或者藍色的邊框顯示了他們周圍的亞歷山大·奧馬拉的片段或紅色邊框顯示了法比奧的片段的作品風格。到目前爲止，當我將它們來回切換時，沒有運氣。

這就像它完全忽略這些樣式？

來源

2014-09-06 kia4567

您可以用!important樣式替換更具體的選擇器樣式!important。例如，要覆蓋以下規則。

.gform_wrapper .ginput_complex input[type=text], 
.gform_wrapper .ginput_complex input[type=url], 
.gform_wrapper .ginput_complex input[type=email], 
.gform_wrapper .ginput_complex input[type=tel], 
.gform_wrapper .ginput_complex input[type=number], 
.gform_wrapper .ginput_complex input[type=password], 
.gform_wrapper .ginput_complex select { 
    width: 95% !important; 
}

您可以用html這樣的前綴來填寫所有規則。

html .gform_wrapper .ginput_complex input[type=text], 
html .gform_wrapper .ginput_complex input[type=url], 
html .gform_wrapper .ginput_complex input[type=email], 
html .gform_wrapper .ginput_complex input[type=tel], 
html .gform_wrapper .ginput_complex input[type=number], 
html .gform_wrapper .ginput_complex input[type=password], 
html .gform_wrapper .ginput_complex select { 
    width: 100% !important; 
}

相同的技術將適用於您的其他情況。您也不必使用gform類，您可以將它們替換爲另外兩個類，您嘗試覆蓋的元素是其後代。

來源

2014-09-06 18:51:01

感謝您的評論！它沒有工作..請參閱我修改的問題。謝謝！ – kia4567 2014-09-06 21:04:33

@ kia4567我無法在您的活頁上的CSS中找到它們。他們應該工作，你確定他們被包括在網頁上嗎？ – 2014-09-06 22:59:24

我有一些與該網站相關的地址和一些其他插件的問題。所以我終於把它拿下來並進行了測試。有用。所以謝謝！ – kia4567 2014-09-19 20:41:53

得到了問題。樣式表是深層目標元素與他們的類名，所以你的一般覆蓋不會爲他們做任何事情，只會應用於沒有這些類的元素。

所以，你需要改變

input, select, textarea { 
    width: 100% !important; 
}

到

.gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium { 
    width: 100% !important; 
} 
.apply-now-form_wrapper .top_label input.medium, .apply-now-form_wrapper .top_label select.medium { 
    width: 100% !important; 
}

和任何元素你想要的目標。

現在，您的樣式重寫與已經聲明的樣式重疊完全相同，因此實際上並不瞭解這一點。但是，如果您稍後想要應用其他樣式，請在此處填寫您的答案

來源

2014-09-06 18:50:46 Devin

感謝您的評論！它沒有工作..請參閱我修改的問題。謝謝！ – kia4567 2014-09-06 21:09:51

覆蓋被迫wordpress CSS樣式

回答

相關問題