如何覆盖wordpress中的css样式

问题描述:

我在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

你选择的目标是一个元素的类.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