极客观点
项目管理
HarmonyOS
CSS中，为相同元素设置样式,当class的数量多于256个时，如果id选择器样式设置在前，class在后，在ie/Firefox/safari下会出现id设置的样式被class覆盖的现象，这是否是那些浏览器的bug？这是否违背CSS优先级规范？
测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css优先级_以量取胜</title>
<style>
div{
width: 100px;
height: 100px;
}
#div1{
color: red;
}
.test0.test1.test2.test3.test4.test5.test6.test7.test8.test9.test10.test11.test12.test13.test14.test15.test16.test17.test18.test19.test20.test21.test22.test23.test24.test25.test26.test27.test28.test29.test30.test31.test32.test33.test34.test35.test36.test37.test38.test39.test40.test41.test42.test43.test44.test45.test46.test47.test48.test49.test50.test51.test52.test53.test54.test55.test56.test57.test58.test59.test60.test61.test62.test63.test64.test65.test66.test67.test68.test69.test70.test71.test72.test73.test74.test75.test76.test77.test78.test79.test80.test81.test82.test83.test84.test85.test86.test87.test88.test89.test90.test91.test92.test93.test94.test95.test96.test97.test98.test99.test100.test101.test102.test103.test104.test105.test106.test107.test108.test109.test110.test111.test112.test113.test114.test115.test116.test117.test118.test119.test120.test121.test122.test123.test124.test125.test126.test127.test128.test129.test130.test131.test132.test133.test134.test135.test136.test137.test138.test139.test140.test141.test142.test143.test144.test145.test146.test147.test148.test149.test150.test151.test152.test153.test154.test155.test156.test157.test158.test159.test160.test161.test162.test163.test164.test165.test166.test167.test168.test169.test170.test171.test172.test173.test174.test175.test176.test177.test178.test179.test180.test181.test182.test183.test184.test185.test186.test187.test188.test189.test190.test191.test192.test193.test194.test195.test196.test197.test198.test199.test200.test201.test202.test203.test204.test205.test206.test207.test208.test209.test210.test211.test212.test213.test214.test215.test216.test217.test218.test219.test220.test221.test222.test223.test224.test225.test226.test227.test228.test229.test230.test231.test232.test233.test234.test235.test236.test237.test238.test239.test240.test241.test242.test243.test244.test245.test246.test247.test248.test249.test250.test251.test252.test253.test254.test255{
color: blue;
}
</style>
</head>
<body>
<div id="div1">
css优先级中是否存在以量致胜的情况？
</div>
<script>
var div1 = document.getElementById("div1");
div1.className = "";
for(var i = 0; i<256; i++){
div1.className += " test"+i;
}
</script>
result:
opera/chrome: red
ie/Firefox/safari: blue
</body>
</html>
否。
涉及到 CSS 权重
深夜了，不写多！你还是去看 => 你应该知道的一些事情——CSS权重