2. IT
    3. CSS ID选择器与类选择器的区别

    CSS ID选择器与类选择器的区别

    xiaoxiao2021-03-25  113

    CSS中ID选择器与类选择器的用法看起来很相似，但是它们有以下两个区别

    1.原则上ID选择器只能使用一次，而类选择器可以不限次数使用

    <html> <head> <style type="text/css"> #red {color:red;} .blue {color:blue;} </style> </head> <body> <!--原则上id选择器只能用一次，但是现在用两次依然表现正常，为什么呢？--> <p id="red">这个段落是红色。</p> <p id="red">这个段落是红色。</p> <!--类选择器可以无限次使用--> <p class="blue">这个段落是蓝色。</p> <p class="blue">这个段落是蓝色。</p> </body> </html>

    表现结果

    可以看到，id选择器即使使用两次依然表现正常，什么情况这是？

    其实这样写，在css里是可以的。但如果页面涉及到js，就不好了。因为js里获取DOM是通过getElementById，而如果页面出现同一个id几次，这样就获取不到了。所以id要有唯一性。

    最后，成熟网站里，你很少看到css里用id选择器的，都是用class，id选择器留给写js的人用，这样避免冲突。

    [引自百度知道]

    2.一个标签可以使用多个类选择器，但只能使用一个ID选择器

    <html> <head> <style type="text/css"> #red {color:red;} #small {font-size:10px} .blue {color:blue;} .big{font-size:30px} </style> </head> <body> <p id="red">这个段落字体是红色。</p> <p id="small">这个段落字体比较小。</p> <p id="red small">这个段落字体又红又小。</p><!--不行的--> <p class="blue">这个段落字体是蓝色。</p> <p class="big">这个段落字体比较大。</p> <p class="blue big">这个段落字体又蓝又大。</p><!--没问题--> </body> </html>

    表现结果

    可以看到，一个标签可以使用多个ID选择器时将表现失败，而使用多个类选择器时表现正常。

    转载请注明原文地址: https://ju.6miu.com/read-9066.html

    技术

    最新回复(0)