样式和CSS

Question

最近我发现文本区域的样式有问题。当我在一个Yii应用程序的视图文件中插入以下代码，并在CSS文件中给出以下样式代码时，当遇到错误时，即当我没有输入任何文本到文本区域时，文本区域的边框仍然保持不变。 视图文件代码：

<div class="form">
        <?php echo $form->labelEx($model,'body'); ?>
        <div class="clear"></div>
        <?php echo $form->textArea($model,'body',array('style' => 'min-width:80%;max-width:80%;min- height:20%;max-height:200px;border:1px solid #666')); ?>
        <?php echo $form->error($model,'body'); ?>
</div>

CSS

.form .error label:first-child,.form .error {
color:#C00;
}
.form div.error textarea,div.form textarea.error{
background:#FEE;
border-color:#C00;
}

现在，当我将内联CSS代码插入到外部样式表中时：

 array('style' => 'min-width:80%;max-width:80%;min- height:20%;max-height:200px')

文本区域的边框颜色按照我的要求发生了变化。我只是想知道这是由于内联样式比样式表具有更高的优先级还是由于其他原因引起的。

- Sumit Gera

Answer 1

这听起来像是一个特定性问题，你可以在这里阅读相关内容，但总的来说，它类似于CSS中的优先级，如下所示：

1. !important
2. 内联样式div style="color=red"
3. 元素IDdiv id=""
4. 类、属性和伪类class="", :focus
5. 元素和伪元素body, :before

如果你想测试一下是否确实是特定性问题，第一件事就是在声明后使用!important，如果它有效，那么就是这个问题了，你需要用更具体的东西覆盖它（可能需要一个ID）。

- Andy

---

这意味着如果我使用内联样式，就像之前使用的那样...它将需要'!important'属性才能更改错误时的边框？ - Sumit Gera

@SumitGera 是的，覆盖内联样式的唯一方法是使用 !important，但这两种方法通常都不是最佳实践，因此如果您可以避免使用内联样式，那就最好了。 - Andy

所以我可以假设当前的样式对我的应用程序来说是最好的。 - Sumit Gera