CSS基础选择器,你认识多少?

news2024/9/25 17:21:09

前言

在上一文初识CSS中,我们了解到了其格式:选择器+{ }

在初步尝试使用时,我们笼统的直接输入了p { }以选择p标签来对其操作,而这一章节里,我们再进一步探索有关基础选择器的相关内容,理解选择器的作用。

选择器分类

  1. 标签选择器

  1. 类选择器

  1. id选择器

  1. 通配符选择器

标签选择器

结构: 标签名 {css属性名:属性值;}

作用:通过标签名,找到页面中所有这类标签,设置样式

特点:选择的是一类标签,而不是单独一个,且标签选择器无论嵌套关系有多深,都能找到对应的标签

类选择器

结构:.类名{css属性名: 属性值;}

作用:通过类名,找到页面中所有带有这个类名的标签,设置样式

特点:

1.所有标签上都有class属性,class属性的属性值称为类名 (类似于名字)

2.类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头一个

3.标签可以同时有多个类名,类名之间以空格隔开

4.类名可以重复,一个类选择器可以同时选中多个标签

<!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>
        .one {
            color: red;
            font-size: 30px;
        }
        .two {
            color: green;
        }
    </style>
</head>
<body>
    <p class="one">这是一个p标签</p>
    <div class="two">这是第二个标签</div>
</body>
</html>

效果图


我们看到特点第三点,比较有意思的是,一个标签可以拥有多个类名,看到上面的代码,我们是不是设置了两个类选择器,一个one,一个two,此时我们更改一下标签里的类别,发现div中对应的两个css都触发了,字体变成了30px大小,同时也变成了绿色

效果图:

id选择器

结构: #id属性值{css属性名: 属性值;}

作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

特点:

1.所有标签上都有id属性

2.id属性值类似于身份证号码,在一个页面中是唯一的,不可重复

3.一个标签上只能有一个id属性值

4.一个id选择器只能选中一个标签

通配符选择器

结构: *{css属性名: 属性值;}

作用:找到页面中所有的标签,设置样式

特点

1.开发中使用极少,只会在极特殊情况下才会用到

2.在基础班小页面中可能会用于去除标签默认的margin和padding

特点二中描述的两个名称是内外边距,我们之后可以通过通配符选择器把所有标签的内外间距去掉

* {
            margin: 0;
            padding: 0;
        }

去除前

去除后

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/354681.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2019蓝桥杯真题平方序列(填空题) C语言/C++

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小明想找到两个正整数 X 和 Y&#xff0c;满足2019<X<Y;2019^2, X^2, Y^2组成等差数列。 请你求出在所有可能的解中&#xff0c;XY 的最小值是多少&#xff1f…

QT(17)- QNetworkAccessManager

QT&#xff08;17&#xff09;- QNetworkAccessManager1 简介2 公有类型3 函数3.1 addStrictTransportSecurityHosts3.2 autoDeleteReplies3.3 cache3.4 clearAccessCache3.5 clearConnectionCache3.6 connectToHost3.7 connectToHostEncrypted3.8 cookieJar3.9 deleteResource…

Metasploit框架基础(一)

文章目录前言一、基础认知二、批量POC/EXP的构想三、poc检测框架的简单实现四、xray五、Meatsploit框架参考前言 Metasploit 一款渗透测试框架漏洞利用的集合与构建和定制满足你的需求的基础漏洞利用和验证的工具 这几个说法都是百度或者官方文档中出现的手法&#xff0c;说…

ASEMI代理FGH60N60SFD,安森美FGH60N60SFD原装IGBT

编辑-Z 安森美FGH60N60SFD原装IGBT参数&#xff1a; 型号&#xff1a;FGH60N60SFD 集电极到发射极电压&#xff08;VCES&#xff09;&#xff1a;600V 栅极到发射极电压&#xff08;VGES&#xff09;&#xff1a;20V 收集器电流&#xff08;IC&#xff09;&#xff1a;120…

【Spark分布式内存计算框架——Spark SQL】9. Dataset(下)RDD、DF与DS转换与面试题

5.3 RDD、DF与DS转换 实际项目开发中&#xff0c;常常需要对RDD、DataFrame及Dataset之间相互转换&#xff0c;其中要点就是Schema约束结构信息。 1&#xff09;、RDD转换DataFrame或者Dataset 转换DataFrame时&#xff0c;定义Schema信息&#xff0c;两种方式转换为Dataset时…

由浅入深掌握 Python 进程间通信的各类方式

由浅入深掌握 Python 多进程间通信各类方式1、为什么要掌握进程间通信2、进程间各类通信方式简介3、消息机制通信1) 管道 Pipe 通信方式2) 消息队列Queue 通信方式4、同步机制通信(1) 进程间同步锁 – Lock(2) 子进程间协调机制 -- Event5、共享内存方式通信(1) 共享变量(2) 共…

【Bluetooth开发】蓝牙开发入门

BLE 蓝牙设备在生活中无处不在&#xff0c;但是我们也只是将其作为蓝牙模块进行使用&#xff0c;发送简单的AT命令实现数据收发。 那么&#xff0c;像对于一些复杂的使用场合&#xff1a;“车载蓝牙”、"智能手表"、“蓝牙音箱”等&#xff0c;我们不得不去了解底层…

千锋教育+计算机四级网络-计算机网络学习-04

UDP概述 UDP协议 面向无连接的用户数据报协议&#xff0c;在传输数据前不需要先建立连接&#xff1b;目地主机的运输层收到UDP报文后&#xff0c;不需要给出任何确认 UDP特点 相比TCP速度稍快些简单的请求/应答应用程序可以使用UDP对于海量数据传输不应该使用UDP广播和多播应用…

VectorDraw Web Library 10.1003.0.1 Crack

将 CAD 绘图和矢量对象显示添加到您的 HTML5 应用程序。 VectorDraw Web Library 是一个矢量图形库&#xff0c;旨在不仅可以打开 CAD 绘图&#xff0c;还可以在任何支持 HTML 5 标准的平台&#xff08;例如 Windows、Android、IOS 和 Linux&#xff09;上显示通用矢量对象。它…

MySQL 9:MySQL存储引擎

数据库存储引擎是数据库的底层软件组织&#xff0c;数据库管理系统&#xff08;DBMS&#xff09;使用数据引擎来创建、查询、更新和删除数据。不同的存储引擎提供不同的存储机制、索引技术、锁定级别等。 许多不同的数据库管理系统现在支持许多不同的数据引擎。 MySQL的核心是…

字符串匹配 - 模式预处理:KMP 算法(Knuth-Morris-Pratt)

Knuth-Morris-Pratt算法&#xff08;简称KMP&#xff09;是最常用的字符串匹配算法之一。算法简介如下算法解释主要来源于这里&#xff0c;但是通常很难阅读完全&#xff0c;我推荐你直接进入下一节 图例解释部分。我们来观察一下朴素的字符串匹配算法的操作过程。如下图&#…

Linux调试器gdb

本文已收录至《Linux知识与编程》专栏&#xff01; 作者&#xff1a;ARMCSKGT 演示环境&#xff1a;CentOS 7 ​ 目录 前言 正文 下载gdb 生成可调式文件 进入gdb gdb常用指令 查看代码 l 运行程序 r 断点设置 b 显示信息 info 查看断点 info b 删除断点 d …

CentOS7突然没法上网【Network 中wired 图标消失】

参考文章(七种办法)&#xff1a;CentOS 7 右上角网络连接图标消失,设置网络有线消失解决办法 正常图标消失&#xff0c;先在 终端命令 依次执行以下命令 service NetworkManager stop service network restart service NetworkManager start 一、问题真烦 CentOS7图形化界面安装…

Day893.MySQL 实例健康状态检测方法 -MySQL实战

MySQL 实例健康状态检测方法 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于MySQL 实例健康状态检测方法的内容。 在一主一备的双 M 架构里&#xff0c;主备切换只需要把客户端流量切到备库&#xff1b;而在一主多从架构里&#xff0c;主备切换除了要把客户端流量切…

搭建企业级docker仓库—Harbor

一、简介 docker 官方提供的私有仓库 registry&#xff0c;用起来虽然简单 &#xff0c;但在管理的功能上存在不足。 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器&#xff0c;harbor使用的是官方的docker registry(v2命名是distribution)服务去完成。harbor在…

String是如何保证不变的?反射为什么可以改变String的值?

String是如何保证不变的&#xff1f;反射为什么可以改变String的值&#xff1f; 1. String字符串的源码分析 String 字符串到底能不能改变已经是老生常谈的问题了&#xff0c;但是在面试环节中&#xff0c;依然能够难住不少人。 下面我们根据 JDK1.8 版本下的String源码进行…

微信Hook逆向-获取登录二维码

文章目录前言一、打开Pc微信&#xff0c;切换到二维码界面二、解析当前二维码内容三、利用Cheat Enginer软件扫描二维码解析文本四、寻找静态偏移五.代码获取二维码网址前言 微信二维码可以Hook获取,也可以通过找到静态偏移的方式读取 提示&#xff1a;以下是本篇文章正文内容…

力扣(LeetCode)240. 搜索二维矩阵 II(C++)

题目描述 枚举 枚举整个矩阵&#xff0c;找到等于 target 的元素&#xff0c;则 return true &#xff0c;否则 return false。 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {int n matrix.size(), m matrix[0]…

DataWhale 大数据处理技术组队学习task2

三、Hadoop分布式文件系统 1. 产生背景 数据量越来越大&#xff0c;一台独立的计算机已经无法存储所有的数据---->将大规模的数据存储到成百上千的计算机中------为了解决数据管理以及维护极其繁琐与低效------>分布式文件系统 分布式文件系统是管理网络中跨多台计算机…

基于SSM框架的狼途汽车门店管理系统的设计与实现

基于SSM框架的狼途汽车门店管理系统的设计与实现 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、…