2017-08-31 181 views
0

我在wordpress網站工作。我一直在使用「自定義代碼插件」來爲網站添加css樣式,直到它的工作時間結束。如何覆蓋wordpress中的css樣式

但我發現有些元素沒有使用我爲他們定義的樣式。這些元素正在使用由wordpress預定義的元素。

我有這樣的元件:

enter image description here

這是元素的HTML代碼

enter image description here

CSS類通用按鈕在WordPress中創建和定義的元素的風格。我試圖用這個CSS類覆蓋:

.action div.generic-button{ 
    animation : none; 
    animation-delay : 0; 
    animation-direction : normal; 
    animation-duration : 0; 
    animation-fill-mode : none; 
    animation-iteration-count : 1; 
    animation-name : none; 
    animation-play-state : running; 
    animation-timing-function : ease; 
    backface-visibility : visible; 
    background : 0; 
    background-attachment : scroll; 
    background-clip : border-box; 
    background-color : transparent; 
    background-image : none; 
    background-origin : padding-box; 
    background-position : 0 0; 
    background-position-x : 0; 
    background-position-y : 0; 
    background-repeat : repeat; 
    background-size : auto auto; 
    border : 0; 
    border-style : none; 
    border-width : medium; 
    border-color : inherit; 
    border-bottom : 0; 
    border-bottom-color : inherit; 
    border-bottom-left-radius : 0; 
    border-bottom-right-radius : 0; 
    border-bottom-style : none; 
    border-bottom-width : medium; 
    border-collapse : separate; 
    border-image : none; 
    border-left : 0; 
    border-left-color : inherit; 
    border-left-style : none; 
    border-left-width : medium; 
    border-radius : 0; 
    border-right : 0; 
    border-right-color : inherit; 
    border-right-style : none; 
    border-right-width : medium; 
    border-spacing : 0; 
    border-top : 0; 
    border-top-color : inherit; 
    border-top-left-radius : 0; 
    border-top-right-radius : 0; 
    border-top-style : none; 
    border-top-width : medium; 
    bottom : auto; 
    box-shadow : none; 
    box-sizing : content-box; 
    caption-side : top; 
    clear : none; 
    clip : auto; 
    color : inherit; 
    columns : auto; 
    column-count : auto; 
    column-fill : balance; 
    column-gap : normal; 
    column-rule : medium none currentColor; 
    column-rule-color : currentColor; 
    column-rule-style : none; 
    column-rule-width : none; 
    column-span : 1; 
    column-width : auto; 
    content : normal; 
    counter-increment : none; 
    counter-reset : none; 
    cursor : auto; 
    direction : ltr; 
    display : inline; 
    empty-cells : show; 
    float : none; 
    font : normal; 
    font-family : inherit; 
    font-size : medium; 
    font-style : normal; 
    font-variant : normal; 
    font-weight : normal; 
    height : auto; 
    hyphens : none; 
    left : auto; 
    letter-spacing : normal; 
    line-height : normal; 
    list-style : none; 
    list-style-image : none; 
    list-style-position : outside; 
    list-style-type : disc; 
    margin : 0; 
    margin-bottom : 0; 
    margin-left : 0; 
    margin-right : 0; 
    margin-top : 0; 
    max-height : none; 
    max-width : none; 
    min-height : 0; 
    min-width : 0; 
    opacity : 1; 
    orphans : 0; 
    outline : 0; 
    outline-color : invert; 
    outline-style : none; 
    outline-width : medium; 
    overflow : visible; 
    overflow-x : visible; 
    overflow-y : visible; 
    padding : 0; 
    padding-bottom : 0; 
    padding-left : 0; 
    padding-right : 0; 
    padding-top : 0; 
    page-break-after : auto; 
    page-break-before : auto; 
    page-break-inside : auto; 
    perspective : none; 
    perspective-origin : 50% 50%; 
    position : static; 
    /* May need to alter quotes for different locales (e.g fr) */ 
    quotes : '\201C' '\201D' '\2018' '\2019'; 
    right : auto; 
    tab-size : 8; 
    table-layout : auto; 
    text-align : inherit; 
    text-align-last : auto; 
    text-decoration : none; 
    text-decoration-color : inherit; 
    text-decoration-line : none; 
    text-decoration-style : solid; 
    text-indent : 0; 
    text-shadow : none; 
    text-transform : none; 
    top : auto; 
    transform : none; 
    transform-style : flat; 
    transition : none; 
    transition-delay : 0s; 
    transition-duration : 0s; 
    transition-property : none; 
    transition-timing-function : ease; 
    unicode-bidi : normal; 
    vertical-align : baseline; 
    visibility : visible; 
    white-space : normal; 
    widows : 0; 
    width : auto; 
    word-spacing : normal; 
    z-index : auto; 
    align-content: unset; 
align-items: unset; 
align-self: unset; 
animation: unset; 
appearance: unset; 
backface-visibility: unset; 
background-blend-mode: unset; 
background: unset; 
binding: unset; 
block-size: unset; 
border-block-end: unset; 
border-block-start: unset; 
border-collapse: unset; 
border-inline-end: unset; 
border-inline-start: unset; 
border-radius: unset; 
border-spacing: unset; 
border: unset; 
bottom: unset; 
box-align: unset; 
box-decoration-break: unset; 
box-direction: unset; 
box-flex: unset; 
box-ordinal-group: unset; 
box-orient: unset; 
box-pack: unset; 
box-shadow: unset; 
box-sizing: unset; 
caption-side: unset; 
clear: unset; 
clip-path: unset; 
clip-rule: unset; 
clip: unset; 
color-adjust: unset; 
color-interpolation-filters: unset; 
color-interpolation: unset; 
color: unset; 
column-fill: unset; 
column-gap: unset; 
column-rule: unset; 
columns: unset; 
content: unset; 
control-character-visibility: unset; 
counter-increment: unset; 
counter-reset: unset; 
cursor: unset; 
display: unset; 
dominant-baseline: unset; 
empty-cells: unset; 
fill-opacity: unset; 
fill-rule: unset; 
fill: unset; 
filter: unset; 
flex-flow: unset; 
flex: unset; 
float-edge: unset; 
float: unset; 
flood-color: unset; 
flood-opacity: unset; 
font-family: unset; 
font-feature-settings: unset; 
font-kerning: unset; 
font-language-override: unset; 
font-size-adjust: unset; 
font-size: unset; 
font-stretch: unset; 
font-style: oblique; 
font-synthesis: unset; 
font-variant: unset; 
font-weight: unset; 
font: ; 
force-broken-image-icon: unset; 
height: unset; 
hyphens: unset; 
image-orientation: unset; 
image-region: unset; 
image-rendering: unset; 
ime-mode: unset; 
inline-size: unset; 
isolation: unset; 
justify-content: unset; 
justify-items: unset; 
justify-self: unset; 
left: unset; 
letter-spacing: unset; 
lighting-color: unset; 
line-height: unset; 
list-style: unset; 
margin-block-end: unset; 
margin-block-start: unset; 
margin-inline-end: unset; 
margin-inline-start: unset; 
margin: unset; 
marker-offset: unset; 
marker: unset; 
mask-type: unset; 
mask: unset; 
max-block-size: unset; 
max-height: unset; 
max-inline-size: unset; 
max-width: unset; 
min-block-size: unset; 
min-height: unset; 
min-inline-size: unset; 
min-width: unset; 
mix-blend-mode: unset; 
object-fit: unset; 
object-position: unset; 
offset-block-end: unset; 
offset-block-start: unset; 
offset-inline-end: unset; 
offset-inline-start: unset; 
opacity: unset; 
order: unset; 
orient: unset; 
outline-offset: unset; 
outline-radius: unset; 
outline: unset; 
overflow: unset; 
padding-block-end: unset; 
padding-block-start: unset; 
padding-inline-end: unset; 
padding-inline-start: unset; 
padding: unset; 
page-break-after: unset; 
page-break-before: unset; 
page-break-inside: unset; 
paint-order: unset; 
perspective-origin: unset; 
perspective: unset; 
pointer-events: unset; 
position: unset; 
quotes: unset; 
resize: unset; 
right: unset; 
ruby-align: unset; 
ruby-position: unset; 
scroll-behavior: unset; 
scroll-snap-coordinate: unset; 
scroll-snap-destination: unset; 
scroll-snap-points-x: unset; 
scroll-snap-points-y: unset; 
scroll-snap-type: unset; 
shape-rendering: unset; 
stack-sizing: unset; 
stop-color: unset; 
stop-opacity: unset; 
stroke-dasharray: unset; 
stroke-dashoffset: unset; 
stroke-linecap: unset; 
stroke-linejoin: unset; 
stroke-miterlimit: unset; 
stroke-opacity: unset; 
stroke-width: unset; 
stroke: unset; 
tab-size: unset; 
table-layout: unset; 
text-align-last: unset; 
text-align: unset; 
text-anchor: unset; 
text-combine-upright: unset; 
text-decoration: unset; 
text-emphasis-position: unset; 
text-emphasis: unset; 
text-indent: unset; 
text-orientation: unset; 
text-overflow: unset; 
text-rendering: unset; 
text-shadow: unset; 
text-size-adjust: unset; 
text-transform: unset; 
top: unset; 
transform-origin: unset; 
transform-style: unset; 
transform: unset; 
transition: unset; 
user-focus: unset; 
user-input: unset; 
user-modify: unset; 
user-select: unset; 
vector-effect: unset; 
vertical-align: unset; 
visibility: unset; 
white-space: unset; 
width: unset; 
will-change: unset; 
window-dragging: unset; 
word-break: unset; 
word-spacing: unset; 
word-wrap: unset; 
writing-mode: unset; 
z-index: unset; 
    /* basic modern patch */ 
    all: initial; !important; 
    all: unset; 

    color:#28B463 !important; 

font-weight:600 !important; 
font-size:large !important; 
    margin-right:1em !important; 

} 

但我無法通過wordpress刪除預定義的類的屬性。

「按鈕」 應該是這樣的:

enter image description here

我能做些什麼來覆蓋CSS樣式?

編輯:

這是我需要重寫

enter image description here

的樣式 「div.generic-按鈕」 元素是給我發出

+4

請向我們展示您試圖覆蓋的CSS。 (1)可能你的選擇器比你想重寫的選擇器更具體,所以它會優先。 (2)您不需要重寫* everything * - 僅設置需要重寫的樣式 – FluffyKitten

+1

您的選擇器針對的是具有'.generic-button'類的元素。屏幕截圖中的選擇器將定位一個元素的**元素內的一個錨元素**,其類型爲'.generic-button'。一些屬性將由子錨定繼承,但大多數不會。在你的選擇器中定位錨點。 – hungerstar

回答

2

你選擇的目標是一個元素的類.generic-button不是像元素截圖中的選擇器那樣是.generic-button元素的子元素的錨元素。

它看起來像你最想擺脫的背景和邊界。嘗試這樣的事情(根據需要進行其他調整)。

div.generic-button a { 
    margin-right: 1em; 
    font-weight: 600; 
    font-size: large; 
    color: #28B463; 
    background: none; 
    border: 0; 
} 

確保將新樣式放置在原始樣式之後,以便覆蓋它。如果你無法做到這一點,那麼以某種方式增加元素的特異性。

+0

看起來好像還有另一個灰色的選擇器,可能乍一看就會被註釋掉。它不應該是'div.generic-button a,.comment-reply-link {}'? – Sheedo

+1

編號'div.generic-button a,.comment-reply-link {}'是兩個選擇器,用逗號'''結合成一個。逗號可以讓你簡化你的CSS。而不是'h1 {color:blue; }'和'h2 {color:blue; }'和'h3 {color:blue; }'你可以做'h1,h2,h3 {color:blue; }'。現在你不必在三個地方改變顏色。該文本呈灰色,因爲該特定的選擇器不適用於當前檢查的元素。 – hungerstar

+0

我沒有注意到上面的許多選擇器也變灰了,我的壞! – Sheedo