2017-08-31 4 views
0

私はワードプレスサイトで働いています。私はCSSスタイルをサイトに追加するために「カスタムコードプラグイン」を使用していました。ワードプレスの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スタイルをオーバーライドするために何ができるのでしょうか?

編集:

これは、「div.genericボタン」の要素は、私はあなたの選択を目標としている

+4

オーバーライドしようとしているCSSを表示してください。 (1)可能なセレクタは、オーバーライドしようとしているセレクタよりも具体的ではないため、優先されます。 (2)オーバーライドする必要はありません。*オーバーライドする必要があるスタイルのみを設定します。 – FluffyKitten

+1

セレクターは、クラスが '.generic-button'の要素を対象としています。スクリーンショットのセレクタは、 '.generic-button'のクラスを持つ要素のアンカー要素**をターゲットにしています。いくつかのプロパティは、子アンカーによって継承されますが、ほとんどは継承されません。セレクタのアンカーもターゲットにします。 – hungerstar

答えて

2

を発行与えている私は

enter image description here

をオーバーライドする必要がスタイルです.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 {}'はカンマ '、'で区切られた2つのセレクタです。カンマを使用すると、CSSを簡素化できます。代わりに 'h1 {color:blue; } 'と' h2 {color:blue; } 'と' h3 {color:blue; } 'あなたは' h1、h2、h3 {color:blue; } '。今度は、3つの場所で色を変更する必要はありません。この特定のセレクタは現在検査されている要素に**適用されていないため、テキストはグレー表示されます。 – hungerstar

+0

私はそれらのセレクタがグレー表示されていることに気付かなかった。 – Sheedo

関連する問題