如何在文件中禁用选择器

Question

我有一个style.css文件。

.example {
  float: none;
  left: 4px;
  position: absolute;
  top: 3px;
}

现在，我尝试禁用.example类中的某些属性

.example {
  bottom: 20px;
}

我尝试如下，但这不起作用

<style type="text/css">
          .example {
                bottom: 20px !important;
                top: none !important;
                left: none !important;
                position: none !important;
            }
 </style>

这是可能的吗？我不想直接在文件中更改？

Answer 1

您尝试覆盖它的属性无效。

没有position:none，top:none和left:none ......

相反，请使用以下内容：

.example {
    bottom:20px;
    top:auto;
    left:auto;
    position:static;
}

执行此操作将成功覆盖每个属性并将其设置回默认值。

jsFiddle here

使用auto基本上会将属性重置为初始值，不需要 !important。

除了仅仅覆盖属性之外，您可以随时删除它们 - 大部分时间......

Answer 2

只要在导入style.css的AFTER中的HTML中声明该样式，它就应该优先。

请在此处查看：JSFiddle

<p>Some Text</p>  <!-- takes most recent styling of <p> -->

我正在导入一个蓝色段落背景的样式表，但我在CSS中重新声明它是红色的。重新申报的优先权，因为它稍后宣布。

另请注意，您的CSS无效。应该是这样的：

.example {
    bottom: 20px !important;
    top: auto !important;
    left: auto !important;
    position: static !important;
}

请参阅：http://www.w3schools.com/cssref/pr_pos_top.asp 和http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

尝试.example { position: static; }。

'None'不是这些CSS规则的有效值。将位置设置为静态后，顶部，底部，左侧，右侧将无关紧要。 “静态”是“位置”规则的默认值。

Answer 4

top: none;，left: none;，position: none;这些不是有效的CSS属性。

你可以试试这个：

.example {
    bottom:20px;
    top:0px;
    left:0px;
    position:static; /*static*/  /*absolute*/ /*relative*/  /*fixed*/;
}