当前位置: 首页 > article >正文

6.前端--CSS-基础选择器【2023.11.26】

1.CSS基本选择器

  1. 标签选择器:

标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。标签选择器可以把某一类标签全部选择出来,比如所有的 <div> 标签所有的 <span> 标签

语法:

标签名{
	 属性1: 属性值1; 
	 属性2: 属性值2; 
	 属性3: 属性值3; 
	 ...
}

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: aquamarine;
        }
        div {
            color: red;
        }
    </style>
</head>
<body>
    <p>123345435</p>
    <div>
        32414345235
    </div>
</body>
</html>

2.类选择器

如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器.

语法

.类名 {
	 属性1: 属性值1; 
	 ...
}

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sec {
            color: aquamarine;
        }
       
    </style>
</head>
<body>
    <p>123345435</p>
    <p class="sec">222222222</p>
</body>
</html>

可以使用多类名调用 重要

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
  1. id选择器

id 属性只能在每个 HTML 文档中出现一次。 只能调用一次, 别人切勿使用.

语法

#id名 {
	 属性1: 属性值1; 
	 ...
}

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #sec {
            color: aquamarine;
        }
       
    </style>
</head>
<body>
    <p>123345435</p>
    <p id="sec">222222222</p>
</body>
</html>
  1. 通配符选择器

在 CSS 中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)
通配符选择器不需要调用, 自动就给所有的元素使用样式

语法

* {
	 属性1: 属性值1; 
	 ...
}

在这里插入图片描述


http://www.kler.cn/a/146036.html

相关文章:

  • Spring Security 6.X + JWT + RBAC 权限管理实战教程(上)
  • Unity补充 -- 协程相关
  • 战场物联网:通信挑战与最新解决方案综述
  • 软考中级复习篇章:数据结构部分的复习
  • 大模型UI:Gradio全解11——Chatbot:融合大模型的聊天机器人(4)
  • 简历_使用 Redis 解决集群模式下的 Session 共享问题,使用拦截器实现用户的登录,校验和权限刷新以及对单位时间内请求频繁的用户IP地址进行限流。
  • 关于营销的一些总结
  • 养生馆服务预约会员管理系统小程序效果如何
  • 耶鲁博弈论笔记
  • 10_7iic整体框架流程
  • 基于Java SSM框架+Vue实现药品销售进销存网站项目【项目源码+论文说明】
  • 2.5 - 网络协议 - HTTP协议工作原理,报文格式,抓包实战
  • 机器学习库:numpy
  • 笔记:pycharm当有多个plt.show()时候,只显示第一个plt.show()
  • 线性分组码的奇偶校验矩阵均匀性分析
  • 最新AI创作系统ChatGPT网站运营源码、支持GPT-4-Turbo模型,图片对话识图理解,支持DALL-E3文生图
  • Vue框架学习笔记——数据代理
  • 高精度/单精度
  • Couchdb 权限绕过漏洞复现(CVE-2017-12635)
  • kafka,RabbitMQ,RocketMQ,他们之间的区别,架构,如何保证消息的不丢失,保证不重复消费,保证消息的有序性
  • 基于PLC的果园灌溉系统设计(论文+源码)
  • R语言数据缩放-1到1
  • 免费分享一套基于springboot的餐饮美食分享平台系统,挺漂亮的
  • 【数据中台】开源项目(2)-Dbus数据总线
  • 只考数据结构,计算机评级C+,成都信息工程大学考情分析
  • 【GD32307E-START】RT-Thread移植测试