CSS的基本选择器（三种）标签选择器class选择器id选择器

博客主要围绕CSS的基本选择器展开，介绍了标签选择器、class选择器和id选择器这三种选择器，它们是CSS中用于选择HTML元素的重要方式，在前端开发中有着广泛应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<html>
<head>
    <meta charset="UTF-8">
    <title>CSS的基本选择器</title>
    <style type="text/css">
        /* 标签选择器 */
        p {
            background-color: red;
            color: yellow;
        }

        div.div1 {
            background-color: blue;
        }
        div[class="div2"] {
            background-color: deeppink;
        }

        /* 类选择器 */
        .grayclass {
            background-color: gray;
        }

        /* id 选择器 */
        p#orangeid {
            background-color: orange;
        }

        #blackid {
            background-color: green;
        }

        /* 通配符选择器 */
        * {
            background-color: black;
            /* 清除所有 html 标记的默认外、内边距
            margin: 0;
            padding: 0;*/
        }

        /* h2 类型的标题居中 */
        h2 {
            text-align: center;
        }
    </style>
</head>
<body>
<h2 align="right">我是标题</h2>    <!-- 优先级被压制 -->
<p>&lt;p&gt;标签选择器</p>

<!-- class选择器: 每个html标签都有一个属性 class -->
<div class="div1">div.div1 选择器</div>
<div class="div2">div[class="div2"] 属性选择器</div>

<div class="grayclass">.grayclass 选择器</div>
<p class="grayclass">.grayclass 选择器</p>

<!-- id选择器: 每个html标签上面有一个属性 id -->
<p id="orangeid">p#orangeid 选择器</p>

<p id="blackid">#blackid 选择器</p>
<div id="blackid">#blackid 选择器</div>

</body>
</html>