样式和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')

文本区域边框的颜色会根据需要更改.我只是想知道,这是否是由于内联样式的优先级高于样式表的优先级或是由于任何其他原因.

Answer 1

这听起来像是一个特殊性问题，你可以在这里阅读它，但一般要点是 CSS 中的一种优先级，如下所示：

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

要测试它是否是特异性问题，您可以做的第一件事是!important在声明后使用，如果有效，那么您正在其他地方定义样式，并且需要用更具体的内容覆盖它（可能需要 ID）