！重要标签 - 它的逻辑

Question

请帮帮我...

鉴于此css：

/* General css */

.my_element {
height:50px !important;
}

/* Webkit-only css */

@media screen and (-webkit-min-device-pixel-ratio:0) {
.my_element {
height:100px !important;
}
}

/* Ipad specific css */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.my_element {
height:200px !important;
}
}

请注意，height在所有情况下都具有!important属性。

问题：在webkit浏览器中查看时，my_element的高度是否为100px？在Ipad上观看它会是200px吗？或者在所有设备和浏览器上都是50像素？

Answer 1

由于这三种风格都有!important，因此它们之间没有任何区别。与其他没有!important的样式相比，这只会影响它们的优先级。

对于具有相同特异性的规则（相同数量的id，类和元素选择器），最后的规则将优先。这意味着webkit和iPad特定规则在使用时将优先使用。

Answer 2

如果有多个样式使用！important，则应用的最后一个样式将是元素上的活动样式。单张纸的样式按照它们的顺序应用。

因此，在您的情况下，高度将应用最后一个值。所以50px或100px或200px（取决于哪种媒体查询对特定浏览器有效）。

Answer 3

我想说，根据您是在iPad上还是在webkit浏览器中，高度会有所不同。

为了清晰起见而编辑：我的意思是它在所有设备上都不会是50px，而在iPad上是200px，在webkit浏览器中是100px。