CSS5：三种基本选择器-重要

最新推荐文章于 2023-03-15 15:59:49 发布

工一木子

最新推荐文章于 2023-03-15 15:59:49 发布

阅读量343

点赞数

分类专栏： CSS学习

本文链接：https://blog.csdn.net/Prince140678/article/details/119842376

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了CSS中三种基本选择器——标签选择器、类选择器和ID选择器的使用方法及优先级。通过实例展示了如何用它们来设置网页元素的样式。类选择器允许对多个标签进行归类，ID选择器则确保全局唯一性，并具有最高的优先级。此外，还探讨了颜色选择和移除特定内容的方法。

摘要由CSDN通过智能技术生成

5、三种基本选择器-重要

2、选择器

作用：选择页面上的某一个或者某一类元素

2.1、基本选择器

1.标签选择器：选择一类标签标签{}

2.类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

3.Id选择器：全局唯一 #id名{}

优先级：id选择器 > class选择器 > 标签选择器

代码show

1.标签选择器.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*标签选择器，会选择到页面上所有的这个标签的元素*/
            h1 {
                color: red;
                background-color: green;
                border-radius: 40px;
            }
            p {
                font-size: 80px;
            }
        </style>
    </head>
    <body>
        <h1>学Java</h1>
        <h1>学Java</h1>
        <p>就上工一学Java</p>
    </body>
</html>

2.类选择器.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*类选择器的格式：
            .class的名称 {}
            好处：
            可以多个标签归类，是同一个class*/
            .gongyi {
                color: red;
            }
            .love {
                color: #71805e;
            }
            .muzi {
                color: green;
            }
        </style>
    </head>
    <body>
        <h1 class="gongyi">工一</h1>
        <h1 class="love">爱</h1>
        <h1 class="muzi">木子</h1>
        <h1>非常</h1>
        <h1 class="love">爱</h1>
        <p class="love">P标签</p>

    </body>
</html>

3.id选择器.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            h1 {
                color: #740c80;
            }
            .gy {
                color: green;
            }
          /*  id选择器：id必须保证全局唯一
            #id名称{}
            优先级：不遵循就近原则，固定的：
            id选择器 > class选择器 > 标签选择器*/

            #biaoti1 {
                color: blue;
            }

        </style>
    </head>
    <body>
        <h1 class="gy" id="biaoti1">标题1</h1>
        <h1 class="gy">标题2</h1>
        <h1>标题3</h1>
        <h1>标题4</h1>
        <h1>标题5</h1>
        <h1>标题6</h1>
    </body>
</html>

彩蛋

1，css样式颜色的选择

1）#十六进制

h1 {
    color: #740c80;
}

2）颜色单词

.gongyi {
    color: red;
}

2,去掉博客园底层一些内容

以：https://www.cnblogs.com/bigsai/p/15169985.html为例：

在这里插入图片描述

去除下面关于作者介绍

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-748EfkB3-1629538026924)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\5、三种基本选择器-重要.assets\image-20210821172216124.png)]$