如何覆盖 CSS

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7646476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:49:23  来源:igfitidea点击:

How to override CSS

cssprimefaces

提问by Mark Estrada

I have basic CSS experienced so I would like to know how can I remove a style CSS that was set by Primefaces?

我有基本的 CSS 经验,所以我想知道如何删除由 Primefaces 设置的样式 CSS?

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    box-shadow: 0 2px 2px #74B2E2 inset;
}

I created my own stylesheet myCustomStyle.css

我创建了自己的样式表 myCustomStyle.css

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    box-shadow: ?????? (How can I override the styling)
}

Thanks

谢谢

回答by Rob W

Use box-shadow:noneto reset the box-shadowto the defaults.

用于box-shadow:none将 重置box-shadow为默认值。

See this sourcefor information about the box-shadowproperty. All properties can be "resetted" by defining the same property, and using the default value.

有关box-shadow属性的信息,请参阅此来源。可以通过定义相同的属性并使用默认值来“重置”所有属性。

To get your myCustomStyle.cssoverride the Primefaces' css file, you have to include your custom file afterthe primefaces' file.

myCustomStyle.css覆盖 Primefaces 的 css 文件,您必须在 primefaces文件之后包含自定义文件。

A lastresort: If your custom style doesn't get applied, add !importantafter your declaration (but before the semicolon): box-shadow: none !important

一个最后一招:如果您的自定义样式不应用,增加!important你的宣言后(但在分号之前):box-shadow: none !important

回答by Nathan MacInnes

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    box-shadow: none;
}

There's a whole issue of precedence here too, but if you're style sheet is inserted after the other one, then it will normally work. If it doesn't, add !importantafter the none.

这里也有一个完整的优先级问题,但是如果您的样式表是在另一个之后插入的,那么它通常会起作用。如果没有,请!importantnone.

回答by maple_shaft

I would like to add that the Primefaces framework utilizes prebuilt themes using the jQuery UI ThemeRoller.

我想补充一点,Primefaces 框架使用jQuery UI ThemeRoller来利用预构建的主题。

You can use the ThemeRoller to create new themes or modify existing themes to your liking.

您可以使用 ThemeRoller 根据自己的喜好创建新主题或修改现有主题。