CSS的样式与优先级

上节我们学习了三种CSS修饰html的三种方式：内部样式-外部样式-行内样式

那他们有没有优先级之分那？是有的，我们可以了解一下他们同时修改样式是怎么样的优先级

首先在书写的格式上我们的书写顺序排序是：行内-外部-内部一般都要按照这个排序来书写那他的优先级顺序就是：行内-内部-外部

但是如果有打乱的话比如我们举个例子，你先写了一个内部再来一个外部，那你的样式是按那个修改的那？他的修改就会按照外部修改，为什么那，这就是他的就近原则，谁离得近就按谁的改，但是我们一般不推荐你这样写，还是要按照他的行内-外部-内部

CSS选择器

一、标签选择器

他的标签就是他的选择器，这个比简单，很直白。

二、类选择器

在标签里添加class给它起名字，单独赋予他样式

注意点在于要在style里要加上.标签{ }

还有起名字也要注意一下，出去字母我们也可以选择-来拼接

三、ID选择器

它具有唯一性，且只能用一次。

‼️在这里再说明一下，三个选择器那我们日常使用的是那个那？一般使用较多的还是累选择器，他的更方便我们的使用。

那他们有没有优先顺序那？有的，id>class>标签，他们没有就近原则，只按顺序优先。

其中ID有绝对优先的优势。

CSS的高级选择器

一、后代选择器 .active p

他是可以更改所有父亲下相同标签的后代所有样式，书写方式要在父亲后面加入空格标签，且注意点是不可以加其他字母。

二、子选择器 .active>p

子选择器顾名思义就是父亲下面的儿子，他的书写方法就是在styel里面选择器输入：div > p只能更改他的儿子p不能更改他的孙子以及其他的p标签

三、相邻兄弟选择器书写方式：.active+p

在同为兄弟的标签命名会改变相邻的兄弟样式，但是不包括自己，且只改变相邻的兄弟，其余兄弟不该变

四、层次选择器通用兄弟选择器书写方式为 .active~p

这个就是在相邻兄弟上加上内容了，可以实现相同属性下面的相同兄弟一起改变，但是注意点是只有他下面的相同的兄弟会改变样式，其他不是兄弟的是不可以更改的，哪怕一样的标签。

Fout-size：字体大小

Color:字体颜色

background:背景颜色

Px：像素

text-decoration: none;去掉下划线

border 边框 solid实线例：border:1px solid red 一像素的实线红色边框

CSS的样式与优先级相关推荐

html5引入外联样式的优先级,CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式最直接最简单的一种,直接对HTML标签使用style="",例如: 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便. ...
css !important用法以及CSS样式使用优先级判断
之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...
css的四种样式及其优先级
目录 1.行内样式代码 2.内嵌样式代码 3.外链样式代码 4.导入样式 5.四种样式的优先级 1.行内样式行内样式又叫标签样式,它是在标签里面加上style属性代码 <body> ...
css初级知识点(css样式分类、css选择器种类及优先级)
美化样式 Css样式分类行内样式:<标签名style="属性名:属性值;"></标签名> 内部样式:<style></style> ...
html和css执行顺序,CSS样式的优先级执行顺序和覆盖规则
好看的网站离不开css样式的布局和装饰,那么大量的css样式,它们的优先级执行顺序和覆盖规则是什么呢? CSS主要有三种引用方式:元素上的style.文件头上的style元素.外部样式文件.这三种优先 ...
CSS引入样式的四种方法及优先级顺序
CSS引入样式的几种方法 css可以通过4种方式引入样式表根据不同的需求可以选择不同的引入方式但是它们也有不同的优缺点行内样式嵌入式样式外部样式 @import 导入的方式 1.行内样式特 ...
HTML样式表优先级最低的是,css的样式优先级
前几天做百度的笔试题,第一题就是关于css优先级的,虽然知道一些规则,但碰上把各条规则相互组合就懵逼了,所以还是得来好好总结一下的. 首要原则就两条: 优先级高的样式覆盖优先级低的样式同一优先级的 ...
css 层叠式样式表（2）
一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2) ...
css3-1 css3游戏介绍、css3样式和优先级
css3-1 css3游戏介绍.css3样式和优先级一.总结一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...

CSS的样式与优先级

CSS的样式与优先级相关推荐

最新文章

热门文章