class没有拿起我的CSS风格

Question

我有一个CSS文件，因为其他所有样式都被正常阅读，所以这里是我正在尝试风格的元素的样式代码

.big-html-area {
    width: 400px;
    height: 300px;
}

这是我的元素

@Html.WrappedTextAreaFor(x => x.Description, new { @class = "form-item-container textbox big-html-area" }, new { @class = "html-area" })

这是源输出

为什么不采用这种风格？

Answer 1

首先，这样做：

.big-html-area {
    width: 400px !important;
    height: 300px !important;
}

正在应用样式？好！这意味着您的选择器有效。样式没有应用？然后你的选择器需要重新加工。

如果您的样式使用!important，那么您需要做的就是摆弄选择器的特殊性，以便其样式可以胜过任何其他互斥的样式。如果您使用浏览器的开发人员工具很方便，那么您可以确定哪个选择器正在应用任何干扰您意图的样式。

首先将ID应用于您的选择器，该ID将胜过任何其他没有ID的非重要选择器：

#someId .big-html-area{
     width:400px;
     height: 300px;
}

您可能需要不断调整选择器的特异性，直到它比其他选择器更具体：

参考：http://css-tricks.com/specifics-on-css-specificity/

但是，如果通过javascript应用竞争风格，那么它将被内联应用，这使得它比样式表中应用的任何内容更具体。悲伤的熊猫：

 <form class="big-html-area" style="width:1000px;height:500px">

在这种情况下，您唯一的选择是使用上面指出的!important关键字来完全否定特异性。这是我将!important放入生产CSS的罕见情况之一。