html5——CSS基础选择器

目录

标签选择器

类选择器

id选择器

 三种选择器优先级

标签指定式选择器

包含选择器

群组选择器

通配符选择器

 Emmet语法(扩展补充)


 

标签选择器

 HTML标签作为标签选择器的名称:

<h1>…<h6>、<p>、<img/>

语法:标签名【标签选择器】 { font-size【属性】:16px【值】;}

类选择器

<标签名 class= "类名称">标签内容</标签名> 

语法:.class { font-size:16px;}

注意事项:

  1. 类名可以由字母、数字、中划线、下划线组成,但不能以数字或中划线开头
  2. 一个标签可以设置多个类名,以空格隔开,但是一个元素不能写多个class属性
  3. 类名可以重复使用,一个类选择器可以同时作用于多个标签(一对多)

 

id选择器

<标签名 id= "id名称">标签内容</标签名>

语法: #id { font-size:16px;}

注意事项:

  1. id属性值类似于身份证号码,在一个页面中是唯一的,不可重复
  2. 一个标签只能设置一个id属性
  3. 一个id选择器只能作用于一个标签(一对一)

 三种选择器优先级

ID选择器>类选择器>标签选择器

标签选择器是否也遵循“就近原则”?

不遵循,无论是哪种方式引入CSS样式,一般都遵循ID选择器 > 类选择器 > 标签选择器的优先级

标签指定式选择器

 既符合选择器1,又符合选择器2,设置样式

p.title{ font-size: 36px;}

选择器之间无空格,如果有标签选择器,标签选择器必须写在前面

包含选择器

 在选择器1所找到的后代中,找到满足选择器2的元素,设置样式

选择器选择器2{ font-size: 36px;}

包含(后代)选择器两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入

群组选择器

选择器1,选择器2,选择器3...都设置相同样式 

选择器1,选择器2,选择器3...{ font-size: 36px;}

选择器组可以是标签选择器、类选择器、id选择器、交集选择器...逗号分隔

通配符选择器

设置页面中所有标签的样式

*{

    margin: 0px;

    padding: 0px;

}

 Emmet语法(扩展补充)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在pycharm中使用jupyter

在pycharm中使用jupyter 前置条件&#xff1a;你的环境中应该有juptyer &#xff0c;没有的话 pip install jupyter 点击项目目录&#xff0c;右键->new->jupyter notebook 打开file settings 找到 jupyter server &#xff08;按照默认的用代理服务器就行&#xff09; P…

ollama + lobechat 搭建自己的多模型助手

背景 人工智能已经推出了快2年了&#xff0c;各种模型和插件&#xff0c;有渐渐变成熟的趋势&#xff0c;打造一个类似 hao123网站的人工智能模型入口&#xff0c;也变得有需求了。用户会去比较多个ai给出的答案&#xff0c;作为程序员想拥有一台自己的GPU服务器来为自己服务。…

react启用mobx @decorators装饰器语法

react如果没有经过配置&#xff0c;直接使用decorators装饰器语法会报错&#xff1a; Support for the experimental syntax ‘decorators’ isn’t currently enabled 因为react默认是不支持装饰器语法&#xff0c;需要做一些配置来启用装饰器语法。 step1: 在 tsconfig.js…

always块敏感列表的相关报错,

在综合的时候&#xff0c;报错如下 Synthesis synth_1 [Synth 8-91] ambiguous clock in event control ["E:/FPGA/FPGA_project/handwrite_fft/handwrite_fft.srcs/sources_1/new/reg_s2p.v":140] 猜测报错原因&#xff08;暂时没有时间寻找原因&#xff0c;后续在…

【linux】服务器卸载cuda

【linux】服务器卸载cuda 文章目录 【linux】服务器卸载cuda1、查找已安装的 CUDA 包&#xff1a;2、卸载 CUDA&#xff1a;3、删除残留文件4、更新系统的包索引&#xff1a;5、检查是否卸载干净&#xff1a; 1、查找已安装的 CUDA 包&#xff1a; dpkg -l | grep cuda2、卸载…

Unity之OpenXR+XR Interaction Toolkit实现 Gaze眼部追踪

使用 Unity OpenXR 实现Gaze眼部追踪 在虚拟现实(VR)和增强现实(AR)应用中,眼动追踪是一项强大而受欢迎的技术。它可以让开发者更好地理解用户的注意力和行为,并创造出更加沉浸和智能的体验。在本文中,我们将探讨如何使用 Unity OpenXR 实现Gaze眼部追踪功能。 Unity …

IEEE顶刊“放水”?稳居1区Top,发文扩张IF稳长,CCF推荐,审稿友好!

本周投稿推荐 SCI • 能源科学类&#xff0c;1.5-2.0&#xff08;25天来稿即录&#xff09; • CCF推荐&#xff0c;4.5-5.0&#xff08;2天见刊&#xff09; • 生物医学制药类&#xff08;2天逢投必中&#xff09; EI • 各领域沾边均可&#xff08;2天录用&#xff09…

python3读取shp数据

目录 1 介绍 1 介绍 需要tmp.shp文件和tmp.dbf文件&#xff0c;需要安装geopandas第三方库&#xff0c;python3代码如下&#xff0c; import geopandas as gpdshp_file_path "tmp.shp" shp_data gpd.read_file(shp_file_path) for index, row in shp_data.iterro…

【Neo4j】实战 (数据库技术丛书)学习笔记

Neo4j实战 (数据库技术丛书) 第1章演示了应用Neo4j作为图形数据库对改进性能和扩展性的可能性, 也讨论了对图形建模的数据如何正好适应于Neo4j数据模型,现在到了该动 手实践的时间了。第一章 概述 Neo4j将数据作为顶点和边存储(或者用Neo4j术语,节点和关系存 储)。用户被定…

DSC主备归档报错

先看一个报错&#xff1a; 2024-07-10 22:12:21.725 [ERROR] database P0000003511 T0000000000000003696 rafil_list_overlap_consecutive_check failed, rfil(DMDATA/data/DSC02/arch/ARCHIVE_LOCAL1_0x57843343_EP1_2024-07-10_20-44-40.log)->next_seq(2901) > nex…

2.54插座开口朝板内还是板外?

答&#xff1a;开口朝板内。 这样无论是安装立式插座&#xff0c;还是卧式插座&#xff0c;引脚定义都一致。并且从左往右&#xff1a;1,2,3,4

Nordic 蓝牙5产品简介

蓝牙5.0 有四个重要的新功能&#xff1a; 更高的比特率为 2 Mbps。长距离模式在 500 kbps 和 125 kbps 两个新的较低比特率下具有更好的灵敏度。通过广告扩展&#xff0c;广播能力提高了 8 倍。改进的信道选择算法 (CSA #2)&#xff0c;可以提高与其他蓝牙和非蓝牙流量的信道协…

初识C++ | 基本介绍、命名空间、输入输出、缺省函数、函数重载、引用、内联函数、nullptr

基本介绍 C的起源 1979年&#xff0c;当时的 Bjarne Stroustrup 正在⻉尔实验室从事计算机科学和软件⼯程的研究⼯作。⾯对项⽬中复杂的软件开 发任务&#xff0c;特别是模拟和操作系统的开发⼯作&#xff0c;他感受到了现有语⾔&#xff08;如C语⾔&#xff09;在表达能⼒、可…

The First项目报告:创新型金融生态Lista DAO

一、Lista DAO是什么&#xff1f; LISTA是Lista DAO的原生加密协议代币&#xff0c;设计为一种可互操作的实用代币&#xff0c;旨在促进去中心化金融&#xff08;DeFi&#xff09;领域内的支付、治理与激励。LISTA的诞生源于Lista DAO项目&#xff0c;该项目是一个基于BNB链的…

修BUG:程序包javax.servlet.http不存在

貌似昨晚上并没有成功在tomcat上面运行&#xff0c;而是直接运行了网页。 不知道为啥又报错这个。。。 解决方案&#xff1a; https://developer.baidu.com/article/details/2768022 就整了这一步就行了 而且我本地就有这个tomcat就是加进去了。 所以说啊&#xff0c;是不是&a…

【Linux进阶】文件系统5——ext2文件系统(inode)

1.再谈inode (1) 理解inode&#xff0c;要从文件储存说起。 文件储存在硬盘上&#xff0c;硬盘的最小存储单位叫做"扇区"&#xff08;Sector&#xff09;。每个扇区储存512字节&#xff08;相当于0.5KB&#xff09;。操作系统读取硬盘的时候&#xff0c;不会一个个…

基于主成分分析PCA的一维时间序列信号降噪方法(Python)

主成分分析PCA是面向模式分类的特征提取最典型的工具&#xff0c;是满足上述映射准则的一种数据压缩的方法。作为经典的特征提取方法&#xff0c;是在不减少原始数据所包含的内在信息前提下&#xff0c;将原始数据集转化为由维数较少的“有效”特征成分来表示&#xff0c;使其在…

34 超级数据查看器 关联图片

超级数据查看器app&#xff08;excel工具&#xff0c;数据库软件&#xff0c;表格app&#xff09; 关联图片讲解 点击 打开该讲的视频 点击访问app下载页面 豌豆荚 下载地址 大家好&#xff0c;今天我们讲一下超级数据查看器的关联图片功能 这个功能能让表中的每一条信息&…

NodeJS餐厅点餐系统-计算机毕业设计源码71834

摘要 随着移动互联网技术的迅猛发展&#xff0c;微信小程序因其便捷性和即用即走的特性&#xff0c;成为了连接用户与服务的新桥梁。Node.js作为一种高效、轻量级的后端技术&#xff0c;为开发者提供了快速构建服务器端应用的能力。本文介绍了一个基于微信小程序和Node.js的餐厅…

【数组、特殊矩阵的压缩存储】

目录 一、数组1.1、一维数组1.1.1 、一维数组的定义方式1.1.2、一维数组的数组名 1.2、二维数组1.2.1、二维数组的定义方式1.2.2、二维数组的数组名 二、对称矩阵的压缩存储三、三角矩阵的压缩存储四、三对角矩阵的压缩存储五、稀疏矩阵的压缩存储 一、数组 概述&#xff1a;数…