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

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

    目录

    1、缘起

    2、基础选择器

    2.1、标签选择器 

    2.2、类选择器 

    2.3、id 选择器 

    2.4、通配符选择器 

    3、画盒子 

    4、总结 

    1、缘起

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

    2、基础选择器

    2.1、标签选择器 

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

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

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

    示例代码：

    1. <style>
    2.      p {
    3.           color: blueviolet;
    4.       }
    5. style>
    6.  
    7.  
    8. <body>
    9.     <p>第一个 p 标签p>
    10.     <p>第二个 p 标签p>
    11.     <p>第三个 p 标签p>    
    12. body>

    2.2、类选择器 

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

    （1）步骤：

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

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

    （2）特点：

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

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

    示例代码： 

    1. <style>
    2.      .blueviolet {
    3.          color: blueviolet;
    4.      }
    5.  
    6.      .size{
    7.          font-size:30px;
    8.      }
    9. style>
    10.  
    11.  
    12. <body>
    13.     <p class="blueviolet">第一个 p 标签p>
    14.     <p>第二个 p 标签p>
    15.     <p>第三个 p 标签p> 
    16.     <div>第一个 div 标签div>
    17.     <div>第二个 div 标签div>
    18.     <div class="blueviolet size">第三个 div 标签div>   
    19. body>

    2.3、id 选择器 

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

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

    （1）步骤：

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

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

    （2）规则：

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

    示例代码： 

    1. <style>
    2.     #blueviolet {
    3.         color: blueviolet;
    4.      }
    5. style>
    6.  
    7.  
    8. <body>
    9.     <p id="blueviolet">第一个 p 标签p>
    10.     <p>第二个 p 标签p>
    11.     <p>第三个 p 标签p> 
    12.     <div>第一个 div 标签div>
    13.     <div>第二个 div 标签div>
    14.     <div>第三个 div 标签div>   
    15. body>

    2.4、通配符选择器 

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

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

    示例代码： 

    1. <style>
    2.     *{
    3.          color: blueviolet;
    4.     }
    5. style>
    6.  
    7.  
    8. <body>
    9.     <p> p 标签p>
    10.     <div> div 标签div>
    11.     <h1>h1 标签h1>
    12. body>

    3、画盒子 

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

    新属性如下：

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

    示例代码：

    1. <style>
    2.      .square1{
    3.          width:100px;
    4.          height:100px;
    5.          background-color: gold;
    6.      }
    7.  
    8.       .square2{
    9.          width:200px;
    10.          height:200px;
    11.          background-color: #ed5736;
    12.      }
    13. style>
    14.  
    15.  
    16. <body>
    17.     <div class="square1">divdiv>
    18.     <div class="square2">divdiv>
    19. body>

     

    4、总结 

            本期的分享总结就到这里了，如果有疑问的小伙伴儿，我们在评论区交流嗷~~~，笔者必回，我们下期再见啦 ！！

    前端 - CSS 专栏系列将持续更新 ，，，，，，

  • 相关阅读:
    vite+vue3+ts项目基础配置
    Mavan进阶之多模块（聚合）
    银行应用程序应该遵循什么方法来测试？测试银行应用程序所涉及的各个阶段和技术讲解
    Go实现随机、轮训、权重、哈希负载均衡
    大数据MapReduce是什么
    基于webservice 使用HttpClient调用
    义乌再次位列第一档！2022年跨境电商综试区评估结果揭晓！
    array enum 的准替代方案(改进版)
    Java第1章 入门及idea开发工具
    springboot1.x和2.x将配置属性绑定到对象上
  • 原文地址：https://blog.csdn.net/qq_51870334/article/details/131085321