CSS优先级和层次结构

Question

这可能是一个非常容易回答的问题，但我正尝试创建一个用于设置来自SQL的属性值的一站式商店，并且想知道刚刚发布的问题的答案在头脑风暴：

如果你设置一个父（假设一个表格）为只读，但设置一个对象（让一个按钮）在该父母不是只读，该按钮将被读取 - 只要？此外，如果父母或孩子有什么！重要包括？

我想设置一个优先级系统，以便用户可以设置这些属性值而不会遇到意外情况不会发生的问题。

Answer 1

readonly不是css属性，因此没有样式。它直接进入html标签。

您要搜索的主要流行语是css inheritance和css specifity。

快速浏览：是的，有固定的规则。并非所有财产都是遗传的。你可以看看他们，例如在MDN CSS Reference。 哪个css规则将取决于您放置样式规则的位置以及您的选择器的具体含义。

层叠顺序(source)：

1. 内嵌式（HTML元素内部）
2. 外部和内部样式表（在头部部分）
3. 浏览器的默认

特异性是像一个评分系统。具有最高分数（=最高特异性）的规则适用。

1. ID，例如， #paragraph {...}（100分）
2. 分类，例如.redparagraphs {...}（10分）
3. 标记，例如p {...}（1分）

因此，规则div p span {...}由于有三个标签选择器而得分为3分。 #wrapper .centered #main .fancynews .withoutborder p {...}将有231点等等。

如果两个规则具有相同的分数（特定性），则处理的最后一个计数（样式表从顶部到底部处理）。

的“快速和肮脏”的伎俩应用的风格是一个!important添加到规则像

.alwaysredtext { color:#F00 !important; } 

你做这将覆盖任何颜色规则等。无论（只要他们不这样做也有!important）。由于后期的可维护性问题，不建议这样做。

p.s.：不要错过Specifity Calculator，您可以在其中输入并比较几个选择器规则并查看哪一个“胜利”。

Answer 2

只有<input>和<textarea>元素支持readonly属性，所以不是，你所描述的是不可能的。