Fatal编程技术网
  • css/
  • 禁用CSS规则的最佳方法（就像Chrome一样？）

禁用CSS规则的最佳方法（就像Chrome一样？）

css

禁用CSS规则的最佳方法（就像Chrome一样？）,css,Css,我有这种情况。我在应用程序中使用引导和jquery ui，包括以下内容： <link href="bootstrap.min.css" rel="stylesheet" media="screen"/> <link href="jquery-ui.css" rel="stylesheet" media="screen"/> <!-- My custom stylesheet --> <link href="style/style.css" rel="st

我有这种情况。我在应用程序中使用引导和jquery ui，包括以下内容：

<link href="bootstrap.min.css" rel="stylesheet" media="screen"/>
<link href="jquery-ui.css" rel="stylesheet" media="screen"/>
<!-- My custom stylesheet -->
<link href="style/style.css" rel="stylesheet" media="screen"/>
在Chrome（F12）中调试时，我可以“禁用”此规则并获得预期结果。但是我不知道如何在我的自定义样式表中实现它。我知道这会奏效：

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}
或者我可以注释掉jquery-ui.css文件中的规则。
但我一直在寻找一种方法，如果以后我决定更改“基本”字体，我可以在一个地方进行更改，而不修改jquery ui和引导css文件。如何实现这一点？Chrome中“禁用”规则的机制是如何工作的？

最好的解决方案是坚持使用一个样式表和一个框架。jQueryUI和引导在大多数情况下不能很好地结合在一起，我建议使用引导模式。这样，所有地方的风格都会保持一致

另一种方法是编辑jQueryUI的样式表并简单地删除这些行。如果它被缩小了，可以使用一个带有换行和查找/搜索功能的文本编辑器（任何像样的编辑器）。不过，我知道你不想那样做

有了这些限制，最好的选择是要求它继承样式

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: inherit;
    font-size: inherit;
}
通过将其放置在其他样式表下面，它将覆盖元素的jQuery UI样式，而是采用其最接近的父元素的样式，例如body元素上的字体引导集：

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
最好的解决方案是坚持使用一个样式表和一个框架。jQueryUI和引导在大多数情况下不能很好地结合在一起，我建议使用引导模式。这样，所有地方的风格都会保持一致

另一种方法是编辑jQueryUI的样式表并简单地删除这些行。如果它被缩小了，可以使用一个带有换行和查找/搜索功能的文本编辑器（任何像样的编辑器）。不过，我知道你不想那样做

有了这些限制，最好的选择是要求它继承样式

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: inherit;
    font-size: inherit;
}
通过将其放置在其他样式表下面，它将覆盖元素的jQuery UI样式，而是采用其最接近的父元素的样式，例如body元素上的字体引导集：

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
只需将相同的代码放在自己的样式表中即可。像这样

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}
而且它将超越默认样式，只要您的自定义CSS文件链接在jQueryUICSS之后

然后，您可以随时更改它。

只需将相同的代码放在您自己的样式表中即可。像这样

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}
而且它将超越默认样式，只要您的自定义CSS文件链接在jQueryUICSS之后

然后你可以随时更改它。

Chrome中的功能是一种调试功能，没有“现实生活”中的对应功能

您需要做的是确定哪些值应该优先于其他值。您可以通过改变CSS文件的顺序（在jQueryUI之后添加bootstrap.min.CSS将使其规则取代jQueryUI），添加自己的规则以覆盖其他人的规则来实现这一点

作为一个警告，我建议不要同时使用jQueryUI和BootstrapCSS——它们都希望在各自框架的功能上相当完整，而且mey会导致大量重叠

此外，如果你想真正控制基本CSS（而不是引入覆盖），试着使用较少（或SASS端口）版本的引导框架-你可以将字体选择之类的东西存储在一个变量中，改变它会改变你在任何地方使用它的字体

Chrome中的功能是一种调试功能，没有“现实生活”中的对应功能

您需要做的是确定哪些值应该优先于其他值。您可以通过改变CSS文件的顺序（在jQueryUI之后添加bootstrap.min.CSS将使其规则取代jQueryUI），添加自己的规则以覆盖其他人的规则来实现这一点

作为一个警告，我建议不要同时使用jQueryUI和BootstrapCSS——它们都希望在各自框架的功能上相当完整，而且mey会导致大量重叠

此外，如果你想真正控制基本CSS（而不是引入覆盖），试着使用较少（或SASS端口）版本的引导框架-你可以将字体选择之类的东西存储在一个变量中，改变它会改变你在任何地方使用它的字体

禁用是指评论吗？在chrome devTools中禁用样式是通过Javascript而不是Javascript完成的CSS@NathanLee我已经更新了我的帖子。我不想修改jquery或引导文件。@Pinocchio谢谢。这是很有价值的答案。可以通过CSS重置规则吗？您可以在自己的CSS文件中覆盖插件CSS，因为您在插件CSS之后调用它。你可以复制并粘贴你的第二块代码，然后把它放在你自己的样式表中，它可能会执行禁用的技巧，你是说注释吗？在chrome开发工具中禁用样式是通过Javascript完成的，而不是通过JavascriptCSS@NathanLee我已经更新了我的帖子。我不想修改jquery或引导文件。@Pinocchio谢谢。这是很有价值的答案。可以通过CSS重置规则吗？您可以在自己的CSS文件中覆盖插件CSS，因为您在插件CSS之后调用它。您只需复制并粘贴第二块代码，并将其放入您自己的样式表中，就可以了trick@Huangism，然后您还需要再次缩小它。只需按Ctrl-F键输入字体名称并删除这些规则就容易多了。我知道它可能不清楚，所以我编辑了它。我不是想滚动直到你看到它：-）是的，但是OP是一个初学者，他很难在缩小的时候找到规则。事实上，也许他应该把所有的东西都整理好，直到他准备好制作服务器。是的，我是usi