html和css哪个优先,CSS3 | 样式和优先级

css3一般介绍:

CSS注释:/*CSS*/

CSS长度单位:

1.px(像素)

2.em(倍数,一般用于文字)

一、HTML嵌套CSS3样式:

1.外部(推荐)

例如HTML文件为index.html

将样式放入另一文件中,index.css

以上两个文件放入同一文件夹下

fb1981bcf54490abc9db042e04e19d52.png

32ca7c0c21ae31e7496952af36662373.png

2.内部

cca82862ce7e6bd8f3b0a7b6538f098e.png

3.内联(不推荐)

0b20d3fb2131958628b08ddb3a26f344.png

二、CSS3优先级

1.内联style

2.id选择器

3.class选择器

4.标签

index

#imgid{

background:#0ff;

border-radius:256px;

}

.imgcls{

background:#f0f;

border-radius:256px;

}

img{

background:#ccc;

border-radius:256px;

}

xs.png

以上代码中,优先级为:内联style>#imgid>.imgid>img

三、CSS3选择器

1.常用选择器

1)标签

...

span{

font-size:10em

}

linux

...

*{} //给页面上所有的标签设置模式

h1{} //给页面上所有的h1标签设置样式

2)id

...

#imgid{

font-size:10em

}

xs.png

...

#h3{} //给id是h3的标签设置样式

3)类

...

.imgid{

font-size:10em

}

xs.png

...

.hcls{} //给class是hcls的一类标签设置模式

4)关联

...

.div2 .imgcls{ /*表示div2里面的imglcs*/

background:#ccc;

border-radius:256px;

}

...

xs.png

xs.png

...

#div1 h1

#div1 h1.ljhcls

5)组合

...

.div1 .imgcls,.div2 .imgcls{

background:#ccc;

border-radius:256px;

}

...

xs.png

xs.png

xs.png

...

div,h1,p,span,button{}

2.基本选择器

1):first-child

e802ad2d0cb1c3a4ad3798945104641f.png

1e2b8eb46a283f964f02eb142204f3de.png

2):first-letter

对一段文字中的第一个字符进行操作

3):first-line

对一段文字中的第一个行进行操作

9c6072bd5465606d60e919ac894a9b61.png

65008467b0ddae24ff5681626875e4d0.png

4):last-child

edfc910bcb44a7f599fb73b71515e03b.png

9da0752708b2ad4b6fb05376554cd90f.png

5):nth-child(num)

可以自由选择对第几个进行样式操作(用法参考1)4))

3.层级选择器

1)a,b(组合)

2)a b(a里面的b)

3)a>b(a的“子集”b)

2cfc7479716a33dc23029f8039bb17f9.png

0f9d2d3c31e2897fbe6e2b2d8208e16b.png

如图,以上代码只对bbbbbbbbb进行操作

4)a+b

c903bf1530fba7f855b731123f3f6edb.png

8813133b03352d0efc5bd8848514d03f.png

如图,以上代码只对后面的

ccccccccccccccc进行操作

4.伪类选择器

1):hover

鼠标在选择内容上则操作,鼠标移开则不进行操作,如下例:

517c4d154f224e7e90c55414d29b486c.png

0dc34488eab9f0454f5dcf14e23f08ad.png

37cd884e985d3613bd11740e3ed5fb6f.png

2):focus

鼠标点击后,表单元素获得焦点,右下图为改变表单轮廓的实例

23ce6c33367cc4f82344c00df7cff319.png

0db4c9f4f841a3ecd04d63d3977bd377.png

3)::selection

内容被选择后,内容的背景色发生变化

c9715508ef8fc455c4e59b4232a1c9b8.png

1b2b71c1532ba764dace3e11be2a153f.png

5.属性选择器(用的不多,不做赘述)

附上一段详细讲解的链接=>CSS选择器参考手册

1)[id]

2)[id=use1]

3)[name*=us]

名字中包含有us的

4)[name|=en]

本文地址:https://blog.csdn.net/weixin_47982238/article/details/107531919

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

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

相关文章

java上传视频到七牛云_Java进阶学习:将文件上传到七牛云中

Java进阶学习:将文件上传到七牛云中通过本文,我们将讲述如何利用七牛云官方SDK,将我们的本地文件传输到其存储空间中去。JavaSDK:https://developer.qiniu.com/kodo/sdk/1239/java#server-upload官方SDK:https://devel…

计算机网络讨论4,计算机网络实验四

实验四IEEE 802.3协议分析和以太网一、实验目的1、分析802.3协议2、熟悉以太网帧的格式二、实验环境与因特网连接的计算机网络系统;主机操作系统为windows;Ethereal、IE 等软件。三、实验步骤(注:本次实验先完成前面的“1 俘获并分析以太网帧…

rust新版组队指令_Rust最新控制台命令2017

物品名称物品代码电池battery.small骨头碎片bone.fragments空的豆罐头can.beans.empty空的金枪鱼罐头can.tuna.empty摄像头cctv.camera木炭charcoal煤coal石油crude.oil炸药explosives动物脂肪fat.animal火药gunpowder高级金属矿hq.metal.ore金属碎片metal.fragments金属矿meta…

python实现mini-batch_Mini-Batch 、Momentum、Adam算法的实现

def random_mini_batches(X,Y,mini_batch_size64,seed0):"""从(X,Y)中创建一个随机的mini-batch列表参数:X - 输入数据,维度为(输入节点数量,样本的数量)Y - 对应的是X的标签,【1 | 0】(蓝|红)&#xf…

html5+shim脚本,HTML5探秘:用requestAnimationFrame优化Web动画

requestAnimationFrame是什么?在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来。如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在浏览器里提供这样一个…

计算机科学与技术的专业论述,关于计算机科学专业的论文题目 计算机科学专业论文题目怎样定...

【100道】关于关于计算机科学专业的论文题目汇总,作为大学生的毕业生应该明白了计算机科学专业论文题目怎样定,选一个好的题目后续的计算机科学专业论文写作起来会更轻松!一、比较好写的计算机科学专业论文题目:1、计算机科学与技术专业应用型人才培养改革调研分析—…

ming window 交叉编译_opencv3编译pc端及交叉编译arm端

环境: opensuse opencv3.4.1 交叉编译器arm-openwrt-linux 作者:帅得不敢出门https://github.com/opencv/opencv/tree/3.4.1选择右边的"clone or download"按钮进行下载,选择下载zip我下的是opencv-3.4.1.zip, 3.4.1的版本号…

锁定计算机 背景图片,win7系统电脑更换锁屏壁纸的方法

当win7系统电脑在一段时间不动的话就进入锁屏状态,然而很多用户觉得默认的锁屏壁纸不好看,就想要更换自己喜欢的锁屏壁纸,那么win7怎么更换锁屏壁纸呢?下面给大家讲解一下win7系统电脑更换锁屏壁纸的方法。1、同时按下窗口键winR组…

两阶段最小二乘法原理_R语言代写工具变量与两阶段最小二乘法

我们要估计的模型是yabxcdeyabxcde,其中是解释变量,,和是我们想要估计的系数。是控制变量,是治疗变量。我们特别关注我们的治疗效果对。生成数据首先,让我们生成数据。假设 的工具变量和之间的相关矩阵如下&#xff1a…

计算机二级循环队列知识点,考点!计算机二级考试公共基础知识冲刺复习笔记:栈、队列和循环队列...

小编所收集到的相关计算机二级考试公共基础知识冲刺复习笔记:栈、队列和循环队列的资料 大家要认真阅读哦!1、栈(Stack)又称堆栈。(1)栈是一种运算受限的线性表,其限制是仅允许在表的一端进行插入和删除运算。人们把此端称为栈顶,…

lua 字符串包含_Programming in Lualua学习第11期 Lua模块与包

微信公众号:GameToolDev关注可了解更多的游戏工具开发教程。问题或建议,请公众号留言;从Lua 5.1开始,我们可以使用require和module函数来获取和创建Lua中的模块。从使用者的角度来看,一个模块就是一个程序库,可以通过r…

学计算机优盘多少内存够用,u盘建议买多大内存的

大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答。u盘建议买多大内存主要看用途,一般容量为:1G、2G、4G、8G、16G、32G、64G、128G、256G、512G、1T,具体来说:1、如果是用来存放视频的&…

.net 从txt中读取行数据_【VBA项目】从指定文件中读取数据并绘制图表

VBA 是一种很久远的编程语言,但并不过时。在满足以下两个条件时,借助 VBA 可以极大的提升生产率,降低出错率:你的电脑上不允许自主安装软件; 你需要执行的工作中大部分的步骤都是固定且重复的。项目背景近期接到一个工…

本地摄像头应用到远程计算机,远程摄像头设置

可以的,智能家用监控摄像头,只要你手机有网,千里之外打开手机都可以查看视频,而且智能摄像头主要用于看家看孩子看老人照看猫猫狗狗等宠物的。智能摄像头,与市面上普通的事件录制不一样,它可以实现7*24小时…

axure实现复选框全选_jq简单的全选、反选和全不选效果

jquery是很实用和方便的前端效果库,可以让我减少很多的操作和节省很多的时间。今天,我们来说一下jq的全选、全不选和反选效果,本篇讲的是最简单简洁的jq全选、全不选和反选的例子。如果还有什么其他的功能要求可自己根据所学到的基础来扩展一…

计算机设备管理器驱动,设备管理器安装驱动程序的详细教程

系统出现问题,很多人都会选择重装系统。但系统重装后,我们所做的第一件事,就是安装驱动。有的驱动程序有安装包,直接安装就行了。但是有的驱动是只有驱动程序文件,而没有执行程序,这时候就需要通过设备管理…

ef执行原生sql语句_EF Core中执行原生SQL语句

一、课程介绍之所以今天录制这个系列文章的主要原因是,想在快速帮助到大家上手在ASP.NET Core WebAPI中结合EF Core来操作我们的数据库。EF Core的基础文章和基础课程实在是太多了,那么阿笨既然也来录制这个系列课堂,阿笨想必肯定会给大家带来…

华立学院计算机组成原理考试,广东工业大学华立学院计算机组成原理期末复习重点...

广工华立-2015-2016学年度-计算机组成原理考试复习一、考试题型:分为选择、判断、填空、简述题四大类。其中选择题有大约三分之一送分,大题占了50分、题目从课后作业出、重点大题为:指令方面;芯片连接;硬盘计算外存&am…

电路串联和并联图解_一个关于交流电路谐振现象的仿真实验

对于一个具有电阻、电感、电容的交流电路中,交流电源两端的电压一般不和它输出的电流同相位。如果调节电路的参数或者电源频率使它们同相位,这时电路就发生了谐振现象。按照发生谐振现象的电路不同,可以分为串联谐振和并联谐振。1、串联谐振在…

sync不生效 vue_Vue实战项目-记账器-重要知识点汇总

历时3周,记账器项目终于可以运行了,这次项目是基于Vue开发,用到了typeScript和Scss,下面基于项目做一个阶段性的总结,回顾一下项目中用到的知识点。一.组件一开始用的是JS对象的写法:构造选项:{ data(){ret…