在CSS样式中，当两个具有相同权重的类时，后面声明的一个将覆盖前一个，就像下面的代码一样
<html> <head> <style type="text/css"> h1.first {color:blue;} h1.second {color:cyan;} </style> </head> <body> <h1 class="first second">The heading text</h1> </body> </html>切换“ 第一 ”和“ 第二 ”不会影响最终的“ 青色 ”颜色。 当我尝试将类列表拆分为多个类时，似乎订单将影响最终结果，例如，在使用时
<h1 class="first" class="second">The heading text</h1>使用时，最终颜色为“ 蓝色 ”
<h1 class="second" class="first">The heading text</h1>最终颜色是' 青色 '
任何人都可以提供有关差异的更详细描述吗？ 看来如果我拆分类列表，只有第一个类属性才有效？ 似乎拆分不会合并到一个单一的类列表中。 谢谢。
In CSS styles, when two classes with same weight, the later declared one will overwrite the previous one, just as following code
<html> <head> <style type="text/css"> h1.first {color:blue;} h1.second {color:cyan;} </style> </head> <body> <h1 class="first second">The heading text</h1> </body> </html>switching 'first' and 'second' will not impact the final 'cyan' color. While when I try to split the class list into multiple classes, seems the order will impact the final result, for example, when using
<h1 class="first" class="second">The heading text</h1>The final color is 'blue', when using
<h1 class="second" class="first">The heading text</h1>The final color is 'cyan'
Could anyone give a more detail description about the difference? It seems if I split class list, only the first class attribute will work? seems the split one will not merge into one single class list. Thanks.
最满意答案
该元素只能有一个class属性。 因此，当您添加两个时，第二个被忽略，这就是您获得该行为的原因。
注意：忽略第二个的事实是浏览器特定的实现。 我不知道浏览器做得与众不同，但基本上文档无效，浏览器可以按照自己的意愿“解决”这个问题。
HTML语法表示同一个元素上不应该存在多个具有相同名称的属性，但它没有说明如何解决这个问题，因此这取决于浏览器供应商。
The element can only have one class attribute. So when you add two, the second one is ignored, which is why you get that behaviour.
Note: The fact that the second one is ignored is a browser specific implementation. I'm not aware of browsers that do it differently, but basically the document is invalid and browsers can 'solve' this any way they want.
The HTML Syntax says that multiple attributes with the same name should never exist on the same element, but it doesn't say how to solve this, so that's up to the browser vendors.
更多推荐
发布评论