CSS中id选择器和类选择器的区别

id选择器和类选择器的区别：（1）类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。（2）id选择器好比人的身份证号码，全中国是唯一的，不得重复。（3）id选择器和类选择器最大的不同在于使用次数上。（4）类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。...

一只考拉er

9920人浏览 · 2022-07-23 20:30:55

一只考拉er · 2022-07-23 20:30:55 发布

id选择器和类选择器的区别

（1）类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

（2）id选择器好比人的身份证号码，全中国是唯一的，不得重复。

（3）id选择器和类选择器最大的不同在于使用次数上。

（4）类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

类选择器的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /* 类选择器口诀：样式点定义 结构类(class)调用 一个或多个 开发最常用 */
        /*
            注意：
                1.类选择器使用"."(英文点号)进行标识，后面要紧跟类名(自定义，我们自己命名的)。
                2.可以理解为给这个标签起了一个名字，来表示。
                3.长名称或词组可以使用中横线来为这个选择器命名。
                4.不要使用纯数字、中文等命名，尽量使用英文字母来表示。 
         */
        .red {
            color: red;
        }
        .star-sing {
            color: purple;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">薛之谦</li>
        <li class="red">邓紫棋</li>
        <li class="star-sing">周杰伦</li>
        <li>汪苏泷</li>
        <li>毛不易</li>
    </ul>
    <div class="red">我也想变红色</div>
</body>
</html>

id选择器的使用

<!DOCTYPE html>
<html">
<head>
    <meta charset="UTF-8">
    <title>基础选择器之id选择器</title>
    <style>
        /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别的标签切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">薛之谦</div>
</body>
</html>