CSS基础选择器学习

最新推荐文章于 2024-06-11 22:02:21 发布

特仑苏OooM

最新推荐文章于 2024-06-11 22:02:21 发布

阅读量310

点赞数 8

文章标签： css 学习前端

本文链接：https://blog.csdn.net/2301_77603222/article/details/136541311

版权

前言：

相信阅读这篇文章的小伙伴也是CSS的初学者，希望通过我将学习内容整理成的博客能对你有帮助或启发。从功能上来理解，选择器是通过特定的方式选中特定的内容，实现对特定内容编辑，那么文章介绍将会从两个方面入手，即特定的方式与特定的内容

一，标签选择器

选择内容：HTML标签，常见的标签有：

选择方式：标签名{ }

下面的选择方式展示都将在VsCode的代码中进行展示，并有适当注释：

以选择 div 标签为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            color: brown;
            font-size: 100px;
        }
    </style>

</head>
<body>
    <div> 这是一个 div </div>
</body>
</html>

二，类选择器

选择内容：类名

类名：是每个标签都可以添加的一个属性，其作用是来标识该标签，不同标签的类名设置可以重复，可以根据这个特性来为具有相同类名的同一类或不同类标签设置相同的格式

选择方式：.类名{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div_01{
            color: black;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="div_01"> 这是第 1 个 div </div>
    <div class="div_01"> 这是第 2 个 div </div>
    <div class="div_02"> 这是第 3 个 div </div>
    <p class="div_01"> 这是第 1 个 p </p>
    
</body>
</html>

运行结果：

三，id 选择器

选择内容：该选择器的选择与类选择器类似，都是选择标签属性，但与之不同的是 id 可以标识唯一的标签，换句话说，每一个标签都有一个属于自己的 id

选择方式：id { }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #hello{
            color: black;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div id="hello">hello my id is hello</div>
    <div id="hi">hello my id is hi</div>
    
</body>
</html>

运行结果：

四，通配符选择器

选择内容：即所有标签，通常的使用场景是给所有的标签配置统一的属性

选择方式：* { }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: brown;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="hello">hello my id is hello</div>
    <div id="hi">hello my id is hi</div>
    
</body>
</html>

运行结果：

特仑苏OooM

关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
CSS基础选择器学习

相信阅读这篇文章的小伙伴也是CSS的初学者，希望通过我将学习内容整理成的博客能对你有帮助或启发。从功能上来理解，选择器是通过特定的方式选中特定的内容，实现对特定内容编辑，那么文章介绍将会从两个方面入手，即特定的方式与特定的内容。
复制链接

扫一扫