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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

fifo页面置换算法设计思路_千万级并发!如何设计一个多级缓存系统?

什么是一个多级缓存系统?它有什么用?我们又如何设计一个多级缓存系统?图片来自 Pexels所谓多级缓存系统,就是指在一个系统的不同的架构层级进行数据缓存,以提升访问效率。我们都知道,一个缓存系统,它面临着许多问题&#xff0c…

apple quicktime怎么在ppt中用_PPT情感专题大赏No. 007:一份这就是街舞第三季主题PPT(上集)...

Hello,大家好,这里是千师傅小作坊第35期,我是你们的老朋友千千。熟悉千师傅小作坊的人都知道,千师傅特别喜欢看综艺,尤其是音乐、表演、舞蹈类。作为一个十八线PPT设计师,如果我看到好看的节目视觉设计&…

idea内存溢出解决_各种OOM代码样例及解决方法

针对目前大家对OOM的类型不太熟悉,那么来总结一下各种OOM出现的情况以及解决方法。把各种OOM的情况列出来,然后逐一进行代码编写复现和提供解决方法。1. 堆溢出-java.lang.OutOfMemoryError: Java heap space。2. 栈溢出-java.lang.OutOfMemorryError。3…

win7安装硬盘后无法启动计算机,硬盘装Win7系统电脑后开机提示DISK BOOT FAILURE怎么办【图文】...

很多人都喜欢安装win7系统,而硬盘安装系统的方式也是深受用户们的喜欢,但是最近有用户反映说硬盘安装win7系统之后,在重启计算机的时候屏幕提示DISK BOOT FAILURE,INSERT SYSTEM DISK AND PRESS ENTER,导致无法正常进入系统&#…

导入数据中文乱码_基于Navicat和Kettle的数据迁移完全解读(多图)

需求描述对于数据分析人员来说,工作的基础是数据,没有数据分析就无从谈起,即巧妇难为无米之炊。#数据库# #数据迁移# #Oracle# 然而,数据分析往往在实验环境或者准生产环境中开展,而数据分布在生产环境,因此…

怎样能确保计算机安全,如何确保电脑安全

如何确保电脑安全电脑安全问题层出不穷,如何确保电脑安全呢?下面是小编分享的一些方法,一起来看一下吧。一、关闭默认共享大部分的电脑系统在默认的情况下都是自动开启网络共享设置的,Win7系统也不例外,该功能主要是为了用户能够…

点云平面提取_基于LiDAR点云数据滤波方法

基于LiDAR点云数据滤波方法机载激光雷达所获取的数据被称为“点云(points cloud)”它在三维空间中呈现出随机分布的形状。在点云中,有些点属于真实的地形表面的点,有些点属于人工建筑物塔、输电线、桥等或自然植被如树、灌木、草、其他植物。激光雷达数据…

全国计算机一级书红色封面,年度最强的网红录取通知书,竟然附赠了一张黑胶唱片...

这两天世超被一张来自中国科学院大学的录取通知书给刷屏了,这份录取通知书里还附赠了一张黑胶光盘。光盘上刻录了一份国科大为新生准备的特别的礼物 —— 一段来自宇宙深处的声音。它们是由国科大师生通过 500 米口径球面射电望远镜( FAST )捕获的 15 颗脉冲星信号&…

动态新增表字段_制作动态的数据透视表(一):定义名称法创建数据透视表

——施瓦辛格:没有跌倒过的人不会成功。我们的日常工作中,会经常遇到一种情况:创建好数据透视表后,有其他被遗漏的数据内容需要重新插入到数据源后,有其他被遗漏的数据内容需要重新插入到数据源中;或者是需…

计算机公式or,【转载】 odds、OR和RR的计算公式和实际意义

1. OddsOdds 的意思为机率、可能性,是指某事件发生的可能性(概率)与不发生的可能性(概率)之比。假如某药物有疗效的比例为p1,则无效的比为1-p1,则odds的计算公式为:对于如下表所示的四格表,患病组的中暴露的概率(以实测…

系统相机裁剪比例_拍照时图片比例怎么选?比构图还要提前一步的摄影攻略要做好...

谈到摄影第一步,很多人都在说构图,但是比构图还要提前一步的,是选择合适的拍摄比例。在拍照时,始终是把要拍的东西装进设备的取景器里面,所以取景器的比例是16:9,还是4:3或者其他,就直接影响了我…

源码安装mysql_CentOS 7中源码安装MySQL 5.7.16 (亲测成功)

最近在CentOS 7中源码安装MySQL 5.7.16,发现MySQL5.7.6以后的安装方式真的与以前版本的MySQL安装方式大大的不同呀。不自己安装一把,下面这篇文章是通过自己的安装过程总结的一篇安装教程,有需要的朋友们可以参考借鉴,下面来一起看…