HTML_CSS的基本选择器的使用及其作用范围和优先级

目录

  • ✨CSS的使用:
      • 行内样式
      • 内部样式
      • 外部样式
  • ✨CSS基本选择器:
      • id选择器
      • class选择器
      • 标签选择器
  • ✨优先级:
      • 选择器的优先级
      • 样式表的优先级

✨CSS的使用:

根据定义CSS的位置不同,分为行内样式、内部样式和外部样式

行内样式

也称为内联样式
直接在标签中编写样式,通过使用标签内部的style属性;

一般在测试的时候使用居多:
语法:
<标签 style="样式1:值1;样式2:值2;....样式N:值N;">hello my css</标签>
案例:
<div style="color: red; width: 100px; height: 100px;background-color: #acacac" >第一个div</div>

运行结果:

在这里插入图片描述

弊端:只能对当前的标签生效,没有做到内容和样式相分离,耦合度太高。

内部样式

定义在head标签内,通过style标签,该标签内容就是CSS代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>div{color: red;}
</style>
<body>
<div>第一个div</div>
</body>
</html>

外部样式

1、提前定义css资源文件
2、在head标签内,定义link标签引入外部样式文件。

try.css文件定义在与html页面同级的css文件夹中 例如:
在这里插入图片描述
写入:

div {
color: red;
}

html文件中写入:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="demo1.css">
</head><body>
<div>第一个div</div>
</body>
</html>

同样的样式作用在同一个标签身上:就近原则;不同样式作用在同一个标签身上:叠加生效。

✨CSS基本选择器:

筛选具有相似特征的元素

id选择器

选择具有相同id属性值的元素,建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!-- id选择器 --><style>#myDiv{color: aqua;}</style></head><body><div id="myDiv">文字1</div><div id="myDiv">文字2</div></body>
</html>

class选择器

选择具有相同的class属性值的元素

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!-- class选择器 --><style>.myClass{color: #800080;}</style></head><body><div class="myClass">文字1</div><div class="myClass">文字2</div></body>
</html>

标签选择器

选择具有相同标签名称的元素。

定义选择器语法:标签名称{};

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!-- 标签选择器 --><style>p{color: chartreuse;}</style></head><body><p>文字1</p><p>文字2</p></body>
</html>

✨优先级:

选择器的优先级

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

当多个选择器作用在同一个标签上的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。

样式表的优先级

行内样式 > 内部样式 >外部样式

同样,三个样式表中都有内容作用在同一个html标签的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。

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

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

相关文章

数据库中对时间的操作(mySql、Oracle、pgSql)

目录 mySql PGSQL oracle 两个日期年数差 月数差 天数差 小时差 加一年 加一月 加一天 加一小时 加一分钟 加一秒 mySql -- %Y-%m-%d %H:%i:%s 区分大小写 m d i s小写 -- 两个日期年数差 SELECT TIMESTAMPDIFF(YEAR, STR_TO_DATE(2000-12-12,%Y-%m-%d), STR…

美颜SDK技术对比,深入了解视频美颜SDK的工作机制

如何在实时视频中呈现更加自然、美丽的画面&#xff0c;而这正是美颜SDK技术发挥作用的领域之一。本文将对几种主流视频美颜SDK进行深入比较&#xff0c;以揭示它们的工作机制及各自的优劣之处。 随着科技的不断进步&#xff0c;美颜技术已经从简单的图片处理发展到了视频领域…

Pandas中级教程——数据合并与连接

Python Pandas 中级教程&#xff1a;数据合并与连接 Pandas 是一款强大的数据处理库&#xff0c;提供了丰富的功能来处理和分析数据。在实际数据分析中&#xff0c;我们常常需要将不同数据源的信息整合在一起。本篇博客将深入介绍 Pandas 中的数据合并与连接技术&#xff0c;帮…

AI绘画室内设计提示词大全(持续更新)

当你开始使用AI绘画进行室内设计&#xff08;interior design&#xff09;时&#xff0c;选择合适的提示词和关键概念对于成功构思和实现你的设计理念至关重要。以下是一些关于室内设计的提示词&#xff0c;涵盖了空间类型、设计风格、光线效果、布局规划、材料类型以及其他要求…

硬件基础-电容

电容 本质&#xff1a;电容两端电压不能激变&#xff0c;所以可以起到稳定电压作用。充放电。 电容量的大小: 想使电容容量大:①使用介电常数高的介质 ②增大极板间的面积 ③减小极板间的距离。 品牌 国外&#xff1a;村田 muRata、松下 PANASONIC、三星 SAMSUNG、太诱 TAI…

sql_lab靶场搭建以及存在的一些问题

sql_lab靶场搭建问题 首先检查小皮版本 把小皮改到5.3.29版本如果没有可以直接点击更多版本进行选择安装 当版本不对时则会暴出这种错误 SETTING UP THE DATABASE SCHEMA AND POPULATING DATA IN TABLES: Fatal error: Uncaught Error: Call to undefined function mysql_co…

React面试题:Component,Element,Instance之间有什么区别和联系?

回答思路&#xff1a;分别是什么-->不同点-->相同点 Component&#xff08;组件&#xff09;&#xff1a;一个组件可以通过多种方式声明&#xff0c;可以是带一个render&#xff08;&#xff09;方法的类&#xff0c;也可以是一个函数&#xff0c;这两种情况下&#xff…

【QT】QTreeWidget控件的使用

目录 1.概述 2.QTreeWidget控件功能接口 2.1 构造函数 2.2 添加和访问顶级条目 2.3 条目访问函数 2.4 当前条目的操作 2.5 条目查找和排序 2.6 条目显示和运行时条目编辑 2.7 信号 2.8 槽函数 2.9 基类 QTreeView 的函数 2.10 树头条目 2.11选中行为和选中模式 3…

2018年第七届数学建模国际赛小美赛A题空中加油飞行计划解题全过程文档及程序

2018年第七届数学建模国际赛小美赛 A题 空中加油飞行计划 原题再现&#xff1a; 太平洋中部一个小岛上的居民被自然灾害困住。救援人员需要派遣一架轻型飞机运送少量急救药品到岛上&#xff0c;并运送一名重伤者到医疗基地求救。岛上有一个无人值守的简易机场&#xff0c;可以…

50ms时延工业相机

华睿工业相机A3504CG000 参数配置&#xff1a; 相机端到端理论时延&#xff1a;80ms 厂家同步信息&#xff0c;此款设备帧率上线23fps&#xff0c;单帧时延&#xff1a;43.48ms&#xff0c;按照一图缓存加上传输显示的话&#xff0c;厂家预估时延在&#xff1a;80ms 厂家还有…

基于Docker Compose的容器编排技术

1.1 介绍一下 Docker 建议我们每⼀个容器中只运⾏⼀个服务&#xff0c;因为 Docker 容器本身占⽤资源极少&#xff0c;所以最好是 将每个服务单独的分割开来但是这样我们⼜⾯临了⼀个问题&#xff1f; 如果我需要同时部署好多个服务&#xff0c;难道要每个服务单独写 Dockerf…

深入了解Linux信号:作用、产生、捕捉和阻塞

这里写目录标题 引言1. 信号的基本概念1.1 信号的分类和编号&#xff1a;1.2 查看信号默认处理动作1.3 信号的作用1.4 信号的产生 2. 常见信号及其作用示例 3. 信号捕捉和处理3.1 信号捕捉函数3.2 sigaction 函数示例 4. 信号阻塞示例 结语 引言 Linux操作系统中&#xff0c;信…

EM(Expectation-Maximum)算法

EM算法 简介 EM算法的核心分为两步 E步&#xff08;Expection-Step&#xff09;M步&#xff08;Maximization-Step&#xff09; 因为在最大化过程中存在两个参量 r , θ r,\theta r,θ&#xff0c;其中若知道 r r r&#xff0c;则知道 θ \theta θ&#xff1b;若知道 θ \…

mybatis一级缓存二级缓存和redis的区别

今天读到关于mybatis一级缓存、二级缓存的知识&#xff0c;然后看了一下mybatis一级缓存、二级缓存的应用场景&#xff0c;当时就感觉和redis很像&#xff0c;于是就查看了一下它们两个的区别。 Redis 和 MyBatis 一级缓存二级缓存的主要区别在于缓存的数据结构和存储方式上。…

机器学习之线性回归(Linear Regression)

概念 线性回归(Linear Regression)是机器学习中的一种基本的监督学习算法,用于建立输入变量(特征)与输出变量(目标)之间的线性关系。它假设输入变量与输出变量之间存在线性关系,并试图找到最佳拟合线来描述这种关系。 在简单线性回归中,只涉及两个变量:一个是自变量…

java常用正则表达式验证方法

1、正则表达式来验证验证11位数字格式的中国大陆电话号码 public boolean validatePhoneNumber(String phoneNumber) {String regex "^1[3-9]\\d{9}$";return phoneNumber.matches(regex); }正则表达式“^1[3-9]\d{9}”用于匹配11位数字格式的中国大陆电话号码。其…

Go环境安装

目录 下载地址 安装 macos环境 window及其他环境 GOPROXY 非常重要 Go开发编辑器 下载地址 Go官网下载地址&#xff1a;https://golang.org/dl/ Go官方镜像站&#xff08;推荐&#xff09;&#xff1a;https://golang.google.cn/dl/ 选择要下载的系统版本&#xff1a; 安装 注意…

Github 2023-12-19开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2023-12-19统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目4Rust项目2非开发语言项目2C#项目1TypeScript项目1 Avalonia: 跨平台UI框架和Avalonia XPF 创建周…

弹幕情感分析可视化

弹幕情感分析可视化 引言1. 弹幕数据爬取2. 弹幕数据处理3. 弹幕数据可视化4. 弹幕情感分析5. 创新点&#xff1a;弹幕情感倾向分布 引言 当今互联网时代&#xff0c;大量的弹幕数据蕴含着丰富的信息&#xff0c;通过对这些数据进行分析和可视化&#xff0c;我们能够深入了解用…

端口占用命令 netstat (centos)+netstat (windows)

linux 1.使用 netstat 命令查看端口占用情况 netstat -tlnp 使用 -p 选项查看进程信息。 使用 -t 选项列出 TCP 协议的连接&#xff1a;类似&#xff08;使用 -u 选项列出 UDP 协议的连接&#xff1a;&#xff09; 2.查找占用指定端口号的应用信息 netstat -tlnp | grep 3…