CSS选择器

木林成森.

于 2024-06-14 10:52:59 发布

阅读量296

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_28783003/article/details/139674367

版权

本篇是PythonWeb课程复习知识点，我会通过生动的例子向大家介绍每个选择器的用法，适合期末大学生复习和入门小白阅读。

1 ID选择器

语法格式为：

#id名{属性名1:属性值1...}

举例说明：

<head>
   <style>
      #h1{
            color: blue;
            font-size: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 id="h1">人工智能与大数据学院</h1>
</body>

以上代码是简写，告诉读者放置的位置。结果展示如下图。

可以看到"人工智能与大数据学院'的样式正是我们style中设置的样式。

注意：id选择器只能在html文档中出现一次，如果标签A调用id属性a,则标签B不能再调用id属性a。

2 类选择器

语法格式：

.类名{
    属性1：属性值1
    属性2：属性值2
    ...
}

举例说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>河南工业大学</title>
    <meta charset="UTF-8">
    <style>
        .red{
            background-color:red ;
        }
        .blue{
            background-color:blue ;
        }
    </style>
</head>

<body>
        <ul>
            <li class="red">我是红色的li</li>
            <li class="blue">我是蓝色的li</li>
        </ul>
        <div class="red">我是红色的div</div>
</body>
</html>

效果展示：

3 标签类选择器

这种是最简单的。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>河南工业大学</title>
    <meta charset="UTF-8">
    <style>
        h4{
            color:red ;
        }
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <h4>元素选择器学习</h4>
    <p>这是一个展示</p>
</body>
</html>

效果展示：