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属性，所以不是，您所描述的内容是不可能的。