【前端 - CSS】第 11 课 - 选择器

Aperion

已于 2023-06-10 22:15:30 修改

阅读量1.1k

点赞数 1

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

于 2023-06-10 22:11:40 首次发布

本文链接：https://blog.csdn.net/qq_51870334/article/details/131085321

版权

HTML 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

欢迎来到博主 Apeiron 的博客，祝您旅程愉快！时止则止，时行则行。动静不失其时，其道光明。

1、缘起

在 CSS 中，选择器的作用是 查找标签 并且为其 设置样式 。常用的基础选择器如下，，，

2、基础选择器

2.1、标签选择器

标签选择器：使用标签名作为选择器，选中同名标签设置相同的样式。

例如：p，h1，div，a，img ......

特点：选中同名标签设置相同的样式，无法差异化同名标签的样式

示例代码：

<style>
     p {
          color: blueviolet;
      }
</style>


<body>
    <p>第一个 p 标签</p>
    <p>第二个 p 标签</p>
    <p>第三个 p 标签</p>    
</body>

2.2、类选择器

作用：查找标签，差异化设置标签的显示效果

（1）步骤：

① 定义类选择器 -> .类名

② 使用类选择器 -> 标签添加 class = "类名"

（2）特点：

① 一个类选择器可以给多个标签使用

② 一个标签可以使用多个类名，class 属性值写多个类名，类名之间用空格隔开

示例代码：

<style>
     .blueviolet {
         color: blueviolet;
     }

     .size{
         font-size:30px;
     }
</style>


<body>
    <p class="blueviolet">第一个 p 标签</p>
    <p>第二个 p 标签</p>
    <p>第三个 p 标签</p> 
    <div>第一个 div 标签</div>
    <div>第二个 div 标签</div>
    <div class="blueviolet size">第三个 div 标签</div>   
</body>

2.3、id 选择器

作用：查找标签，差异化设置标签的显示效果

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

（1）步骤：

① 定义 id 选择器 -> #id 名

② 使用 id 选择器 -> 标签添加 id = " id 名"

（2）规则：

同一个 id 选择器在一个页面只能使用一次

示例代码：

<style>
    #blueviolet {
        color: blueviolet;
     }
</style>


<body>
    <p id="blueviolet">第一个 p 标签</p>
    <p>第二个 p 标签</p>
    <p>第三个 p 标签</p> 
    <div>第一个 div 标签</div>
    <div>第二个 div 标签</div>
    <div>第三个 div 标签</div>   
</body>

2.4、通配符选择器

作用：查找页面所有标签，设置相同样式

通配符选择器：* ，不需要调用，浏览器自动查找页面所有标签，设置相同的样式。开发项目初期，清楚标签默认样式的时候使用。

示例代码：

<style>
    *{
         color: blueviolet;
    }
</style>


<body>
    <p> p 标签</p>
    <div> div 标签</div>
    <h1>h1 标签</h1>
</body>

3、画盒子

目标：使用合适的选择器画盒子

新属性如下：

属性名	作用
width	宽度
height	高度
background-color	背景色

示例代码：

<style>
     .square1{
         width:100px;
         height:100px;
         background-color: gold;
     }

      .square2{
         width:200px;
         height:200px;
         background-color: #ed5736;
     }
</style>


<body>
    <div class="square1">div</div>
    <div class="square2">div</div>
</body>