CSS的5种基本选择器

最新推荐文章于 2024-07-22 20:38:06 发布

just_花生

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量620

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/zhiyinweini3/article/details/104382065

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

背景：学习前端知识，自己做页面
目的：学习前端知识
组网图：不涉及
工具：vscode1.41.0
简介：CSS的5种基本选择器：
第一种，元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huahua</title>
    <style>
        /* 元素选择器 */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>爱你呦</h1>
    <h1>爱你呦</h1>
    <h1>爱你呦</h1>
</body>
</html>

在这里插入图片描述
第二种，类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huahua</title>
    <style>
        /* 类选择器 */
        .cls {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>爱你呦</h1>
    <h1 class="cls">爱你呦</h1>
    <h1>爱你呦</h1>
</body>
</html>

在这里插入图片描述
第三种，ID选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huahua</title>
    <style>
        /* ID选择器 */
        #box {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 id="box">爱你呦</h1>
    <h1>爱你呦</h1>
    <h1>爱你呦</h1>
</body>
</html>

在这里插入图片描述
第四种，属性选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huahua</title>
    <style>
        /* 属性选择器 */
        [name="hhh"] {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 id="box">爱你呦</h1>
    <h1 class="cls">爱你呦</h1>
    <h1 name="hhh">爱你呦</h1>
</body>
</html>

在这里插入图片描述
第五种，通配符选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huahua</title>
    <style>
        /* 通配符选择器 */
        * {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 id="box">爱你呦</h1>
    <h1 class="cls">爱你呦</h1>
    <h1 name="hhh">爱你呦</h1>
    <h2>love</h2>
</body>
</html>