css三种基本选择器（重要）

最新推荐文章于 2024-08-30 13:54:19 发布

思诚代码块

最新推荐文章于 2024-08-30 13:54:19 发布

阅读量2.9k

点赞数

分类专栏： CSS 系列笔记+源码展示文章标签： css 前端网页

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122700928

版权

CSS 系列笔记+源码展示专栏收录该内容

19 篇文章 4 订阅

订阅专栏

大家好，今天我们来分享一下css三种基本选择器

这是我们css当中的一大重点

写一段HTML的初始源代码：
1.标签选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>  相信我</h1>
<p>你很棒</p>
</body>
</html>

显示它的效果

在这里插入图片描述

在源码当中主体内容，他有俩个标签

我们写上css代码

源码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: yellow;  
            /*这就是它对应的标签选择器*/
            /*他和HTML主体源码是一一对应的*/
            /*通过这种办法改变各个标签对应内容的属性*/      
        }
        p{
            color: blue;
        }
    </style>
</head>
<body>
<h1>  相信我</h1>
<p>你很棒</p>
</body>
</html>

我们再来看效果：

在这里插入图片描述

 <style>
        h1{
            color: yellow;     
            /*这就是它对应的标签选择器*/
            /*他和HTML主体源码是一一对应的*/
            /*通过这种办法改变各个标签对应内容的属性*/   
        }
        p{
            color: blue;
        }
    </style>

这就是标签选择器

多写一些效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    **/*标签选择器，会选择到页面上所有的这个标签的元素*/**
    <style>
        h1{
            color: yellow;
            background: deeppink;
            border-radius: 36px;
            /*这就是它对应的标签选择器*/
            /*他和HTML主体源码是一一对应的*/
            /*通过这种办法改变各个标签对应内容的属性*/
        }
        p{
            color: blue;
            background: greenyellow
                 ;
        }
    </style>
</head>
<body>
<h1>  相信我</h1>
<p>你很棒</p>
</body>
</html>

效果实例：

在这里插入图片描述

下面，我们讲类选择器：


写一段源码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>好好学习</h1>
    <h1>天天向上</h1>
      
</body>
</html>

显示结果：

在这里插入图片描述
使用标签选择器来写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: greenyellow;
        }
    </style>
</head>
<body>
    <h1>好好学习</h1>
    <h1>天天向上</h1>

</body>
</html>

效果：

在这里插入图片描述

这是我们标签选择器写出的结果，

标签选择器

/标签选择器，会选择到页面上所有的这个标签的元素/

这是他的特点，也是它的局限性

就是我们有的时候，不希望所定义标签元素全部是一个颜色

类选择器可以做到这一点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .shuaige {
           color: red;
       }
       .xuexi{
           color: deeppink;
       }
    </style>
</head>
<body>
    <h1 class="shuaige">好好学习</h1>
    <h1 class="xuexi">天天向上</h1>

</body>
</html>

达到了这样的效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        类选择器的格式:.class的名称{}
        好处是，可以是可以多个多个标签归类，是同一个class。可以复用
        
       .shuaige {
           color: red;
       }
       .xuexi{
           color: deeppink;
       }
    </style>
</head>
<body>
    <h1 class="shuaige">好好学习</h1>
    <h1 class="xuexi">天天向上</h1>
      <p class="xuexi">   我是技术狂</p>     
</body>
</html>

显示结果：

在这里插入图片描述

再讲一下id选择器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #daqing{
            color: aqua;
        }
        .style1{
            color: red;
        }
        h1{
            color: green;
        }
    </style>
</head>
<body>
<h1 id="daqing">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

<!--我们在这个底下同时使用了三个选择器，-->
<!--id 选择器 ：id必须保证全局唯一，不能复用
id选择器格式：#id名称{}
不遵循就近原则，
三种选择器的优先级，
id选择器>class选择器（类选择器）>标签选择器    //在同时使用三种选择器的时候
-->



<!---->