css样式应用优先级

合集下载

常见CSS选择器的权重和优先级

常见CSS选择器的权重和优先级

常见CSS选择器的权重和优先级⼀、常见CSS选择器【元素选择器】1、通配选择器:*(匹配所有元素)a、效率不⾼,页⾯上的标签越多,效率越低,所以页⾯上最好不要出现这个选择器2、标签选择器:li(匹配标签为li的元素)a、所有标签都能够当做选择器,⽐如body、h1、dl、ul、span等等b、不管这个标签藏的多深,都能够被选择上c、选择的是所有的,⽽不是某⼀个。

所以是共性,⽽不是特性3、ID选择器:#content(匹配ID属性值等于content的元素)4、类选择器:.list(匹配class属性包含list的元素)a、class可以重复,也就是说,同⼀个页⾯上可能有多个标签同时属于某⼀个类b、同⼀个标签可以同时携带多个类,多个类⽤空格隔开,多个样式有冲突的,以css中后出现的为准c、不要去试图⽤⼀个类名,把某个标签的所有样式写完。

这个标签要多携带⼏个类,共同造成这个标签的样式d、每⼀个类要尽可能⼩,有“公共”的概念,能够让更多的标签使⽤【关系选择器】1、后代选择器:#content h3(匹配ID为content的元素内所有的h3元素)a、空格就表⽰后代,强调⼀下:选择的是后代,不⼀定是⼉⼦b、当要把某⼀个部分的所有的什么,进⾏样式改变,就要想到后代选择器2、⼦元素选择器:#content>h3(匹配ID为content的元素⼦级的h3元素)3、交集选择器:h3.content(匹配class为content的h3元素)a、交集选择器没有空格b、交集选择器可以连续交(⼀般不要这么写)c、交集选择器,我们⼀般都是以标签名开头,⽐如div.haha ⽐如p.special4、并集选择器(分组选择器):h1,h2(匹配所有的h1和h2元素)5、相邻选择器:h1+h2(匹配 h1 元素之后紧跟的 h2 元素)6、兄弟选择器:h1~h2(匹配 h1 元素之后所有的 h2 元素)【属性选择器】1、a[class]:匹配具有 class 属性值的 a 的元素2、a[target="_blank"]:匹配 target 属性值等于 _blank 的 a 元素3、a[href^="https"]:匹配 href 属性值以 https 开头的 a 元素4、a[href$=".jpg"]:匹配 href 属性值以 .jpg 结尾的 a 元素5、a[href*="baike"]:匹配 href 属性值包含 baike 的 a 元素6、a[class~="abc"]:匹配 class 属性值以空格为分隔符,其中有⼀个等于 abc 的 a 元素伪类选择器和伪元素选择器使⽤频率不⾼,本⽂暂不说明,详细⽰例可参考:⼆、CSS选择器权重和优先级共分为5个等级:第1等:提升指定样式规则的应⽤优先权,如:color:red !important,权值为10000(不建议使⽤)第2等:代表内联样式,如: style="xxx",权值为1000第3等:代表ID选择器,如:#content,权值为100第4等:代表类,伪类和属性选择器,如.content,:hover,[attribute],权值为10第5等:代表元素选择器和伪元素选择器,如div,p,权值为1通⽤选择器(*),⼦选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0三、CSS选择器权重计算1、元素被两个css样式选中,选择权重⼤的样式,如果权重⼀样,以css中后出现的为准2、元素没有被css样式选中,要显⽰继承的样式时,使⽤就近原则2、继承的样式权重为0(color、 text-开头的、line-开头的、font-开头的样式都可以继承)判断⼀块内容的样式是什么?按照以下步骤:HTML代码:<div id="content"><div id="main-content"><h2>CSS简介</h2><p>CSS是⼀组格式设置规则,⽤于控制Web页⾯的外观。

CSS的优先级探讨

CSS的优先级探讨
例如,如果在LINK所链接的样式表(mycss.css)中定义了以下一条样式规则:
H1{color:red}
同时在嵌入式样式定义中也定义了一条规则:
H1{color:yellow}
在网页中的样式定义如下所示:
<HEAD>
<LINK rel=stylesheet href="mycss.css" type="text/css">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div>
为了大家方便阅读,我去掉了一些代码。
四大原则的权重就是: 原则一 > 原则二 > 原则三 > 原则四
解释:
首先遵循原则一
解释:当对某个元素的CSS选择符样式定义的越具体,层级越明确,该定义的优先级就越高。
CODE:
<style type="text/css">
<!--
.class1 .class2 .class3{font-size: 25px;}
.class2 .class3{font-size:18px}
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
</HEAD>
由于STYLE标记符中定义的样式后出现,因此它具有更高的优先级,所以网页中H1标记符的内容将显示为黄色(yellow)。同样,如果将Link标记符的位置移动到<STYLE></STYLE>标记符之后,则网页中H1标记符的内容将显示为红色(red)。

学会使用HTML和CSS进行网页设计

学会使用HTML和CSS进行网页设计

学会使用HTML和CSS进行网页设计网页设计是当今互联网发展的重要领域之一,学会使用HTML和CSS进行网页设计已成为许多人追求的技能。

HTML和CSS是网页设计的基础,它们可以实现丰富多样的网页布局和样式,给用户呈现出各种精美的界面。

本文将就学会使用HTML和CSS进行网页设计展开讨论,为读者提供一些实用的技巧和建议。

一、概述 HTML和CSSHTML(超文本标记语言)是一种用来创建网页的标准标记语言,它定义了网页的结构和内容。

CSS(层叠样式表)则是一种用来控制网页样式和布局的样式表语言。

HTML可以看作是网页的骨架,而CSS则是为网页赋予美丽外观的工具。

二、构建网页结构在使用HTML进行网页设计时,首要任务是构建网页的结构。

HTML提供了一系列的标签来定义页面的元素,如标题、段落、列表等。

通过合理使用这些标签,可以使网页结构更加清晰有序,提高用户体验。

对于初学者来说,推荐使用语义化标签来构建网页结构。

语义化标签具有可读性强、结构清晰等特点,例如使用<header>标签定义页面的头部,<nav>标签定义导航菜单,<main>标签定义主要内容区等。

除了使用语义化标签,还可以使用DIV标签来划分页面的不同区域。

通过给不同的DIV添加样式,可以实现更灵活的布局效果。

三、优化页面样式CSS是控制网页样式的重要工具,使用CSS可以使网页呈现出更漂亮的外观。

以下是一些优化页面样式的技巧:1. 使用选择器:选择器用于选择要应用样式的HTML元素。

常见的选择器有标签选择器、类选择器、ID选择器等。

合理使用选择器可以提高样式的灵活性和复用性。

2. 理解权重:CSS样式的权重决定了应用的优先级。

一般来说,ID选择器的权重最高,其次是类选择器和属性选择器,最后是标签选择器。

理解权重的规则可以帮助我们更好地控制样式的应用。

3. 使用盒模型:CSS中的盒模型决定了盒子(元素)的尺寸。

CSS选择器优先级总结

CSS选择器优先级总结

CSS选择器优先级总结CSS三⼤特性—— 继承、优先级和层叠。

继承:即⼦类元素继承⽗类的样式;优先级:是指不同类别样式的权重⽐较;层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式。

css选择符分类 ⾸先来看⼀下css选择符(css选择器)有哪些? 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") 3.ID选择器(如:id="name",id="name_txt") 4.全局选择器(如:*号) 5.组合选择器(如:.head .head_logo,注意两选择器⽤空格键分开) 6.后代选择器 (如:#head .nav ul li 从⽗集到⼦孙集的选择器) 7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显⽰ 8.继承选择器(如:div p,注意两选择器⽤空格键分开) 9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。

) 10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含) 11.⼦选择器 (如:div>p ,带⼤于号>) 12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)css优先级当两个规则都作⽤到了同⼀个html元素上时,如果定义的属性有冲突,那么应该⽤谁的值的,CSS有⼀套优先级的定义。

不同级别1. 在属性后⾯使⽤ !important 会覆盖页⾯内任何位置定义的元素样式。

2. 作为style属性写在元素内的样式3. id选择器4. 类选择器5. 标签选择器6. 通配符选择器7. 浏览器⾃定义或继承总结排序:!important > ⾏内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性同⼀级别同⼀级别中后写的会覆盖先写的样式上⾯的级别还是很容易看懂的,但是有时候有些规则是多个级别的组合,像这样<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">div.test{background-COLOR:#a00;width:100px;height: 100px;}.test.test2{background-COLOR:#0e0;width:100px;height: 100px;}</style></head><body><div class="test test2"></div></body></html>到底div是应⽤那条规则呢,有个简单的计算⽅法(经园友提⽰,权值实际并不是按⼗进制,⽤数字表⽰只是说明思想,⼀万个class也不如⼀个id权值⾼)内联样式表的权值为 1000ID 选择器的权值为 100Class 类选择器的权值为 10HTML 标签选择器的权值为 1我们可以把选择器中规则对应做加法,⽐较权值,如果权值相同那就后⾯的覆盖前⾯的了,div.class的权值是1+10=11,⽽.test1 .test2的权值是10+10=20,所以div会应⽤.test1 .test2变成绿⾊另外⼀种理解⽅式: CSS优先级:是由四个级别和各级别的出现次数决定的。

css判断题

css判断题

css判断题CSS(层叠样式表)是一种用于描述网页样式和布局的标记语言。

它可以通过对HTML元素应用样式规则,控制网页的外观和样式。

以下是一些关于CSS的判断题。

1. CSS是一种编程语言。

错误。

CSS并非一种编程语言,而是一种样式表语言。

它用于定义网页元素的外观和样式,但不包含逻辑或算法。

2. 可以使用内联样式将CSS样式直接应用到HTML元素上。

正确。

内联样式是指直接在HTML元素的style属性中定义CSS样式。

它的优先级最高,可以覆盖其他方式定义的样式。

3. CSS选择器用于选择HTML元素并应用样式规则。

正确。

CSS选择器可以根据元素的标签名、类名、ID等属性,选择并应用样式规则。

常用的选择器包括标签选择器、类选择器、ID选择器等。

4. CSS样式规则由选择器和声明块组成。

正确。

CSS样式规则由选择器和声明块组成。

选择器用于选择要应用样式的元素,声明块由一系列属性和值组成,用于定义元素的样式。

5. CSS样式可以通过链接外部样式表进行引用。

正确。

可以使用<link>元素将外部样式表链接到HTML文档中。

外部样式表通常被存储在独立的CSS文件中,使得多个网页可以共享相同的样式规则。

6. CSS可以控制元素的位置和尺寸。

正确。

通过使用CSS的定位和布局属性,可以控制元素在网页中的位置和尺寸。

常用的属性包括position、top、left、width等。

7. CSS样式可以通过嵌套选择器来选择元素的后代或子元素。

正确。

CSS允许使用嵌套选择器,以选择元素的后代或子元素。

例如,可以使用ul li选择所有ul元素下的li元素。

8. CSS样式可以通过选择器的优先级来确定应用顺序。

正确。

当多个选择器同时匹配同一个元素时,CSS会根据选择器的优先级来决定应用哪个样式规则。

选择器的优先级通常由选择器类型、类选择器、ID选择器等决定。

9. CSS样式可以通过继承来应用到子元素。

正确。

CSS中的某些属性具有继承性,即子元素可以继承父元素的样式。

CSS帮助手册

CSS帮助手册

CSS帮助手册2篇CSS帮助手册(上)CSS(层叠样式表)是一种用于描述网页中元素的样式和布局的标记语言。

它通过为HTML元素添加样式,实现了网页的美化和个性化。

本篇文章将为大家介绍CSS的基本语法、选择器和常用样式属性。

一、CSS基本语法CSS的语法由选择器和声明块组成。

选择器用于选择需要添加样式的HTML元素,而声明块则包含了一系列样式属性和值。

1. 选择器选择器是CSS中最重要的部分,它用于指定需要应用样式的HTML元素。

常见的选择器有:- 元素选择器:通过HTML元素的标签名选择元素,如`p`表示所有`<p>`元素。

- 类选择器:通过HTML元素的`class`属性选择元素,如`.red`表示所有`class`为red的元素。

- ID选择器:通过HTML元素的`id`属性选择元素,如`#header`表示`id`为header的元素。

- 属性选择器:通过HTML元素的属性选择元素,如`[type="text"]`表示所有`type`属性为text的元素。

- 伪类选择器:通过HTML元素的特殊状态选择元素,如`:hover`表示鼠标悬停时的元素。

2. 声明块声明块由一对花括号`{}`包裹,每个声明由属性和值构成。

属性用于指定需要修改的样式,值用于指定属性的具体取值。

例如,下面的CSS代码将为所有`<p>`元素设置红色字体:```cssp {color: red;}```二、常用的CSS样式属性CSS提供了众多样式属性,可以用来修改HTML元素的外观和布局。

以下是常用的样式属性及其作用:1. 字体样式- `color`:用于设置文本颜色,值可以是颜色名称或RGB值。

- `font-size`:用于设置字体大小,值可以是像素、百分比或者其他单位。

- `font-family`:用于设置字体样式,值可以是字体名称或者字体族名称。

2. 边框样式- `border`:用于设置边框样式,属性值由边框宽度、边框样式和边框颜色组成。

CSS样式书写顺序及规范

CSS样式书写顺序及规范

CSS样式书写顺序及规范作者:WangMin格⾔:努⼒做好⾃⼰喜欢的每⼀件事在项⽬中,⼤部分前端程序员都没有按照良好的CSS书写规范来写CSS代码,每次写css样式都是⽤到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。

后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的⼀种⽅式。

下⾯就开始学习吧!!各种类型属性的书写顺序及作⽤书写顺序优先级第⼀定位属性:position display float left top right bottom overflow clear z-index优先级第⼆⾃⾝属性:width height padding border margin background优先级第三⽂字样式:font-family font-size font-style font-weight font-varient color优先级第四⽂本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height优先级第五css3中新增属性:content box-shadow border-radius transform……书写顺序的作⽤减少浏览器reflow(回流),提升浏览器渲染dom的性能。

解析html构建dom树,解析css构建css树:将html解析成树形的数据结构,将css解析成树形的数据结构构建render树:DOM树和CSS树合并之后形成的render树。

布局render树:有了render树,浏览器已经知道那些⽹页中有哪些节点,各个节点的css定义和以及它们的从属关系,从⽽计算出每个节点在屏幕中的位置。

CSS-----css三种样式以及css选择器的优先级问题

CSS-----css三种样式以及css选择器的优先级问题

CSS-----css三种样式以及css选择器的优先级问题
css三种样式的优先级问题:
css⼀般三种使⽤样式为:内联式、内嵌式、外部式
内联式即在html的标签中书写样式;
内嵌式即css样式写在<style type="text/css">XXX</style>中,style 是在head标签⾥⾯;
外部式即通过link标签来引⽤,外部的css⽂件来控制标签样式,但是要放在sytle标签外head标签⾥。

<link rel="stylesheet" href="aaa.cs">优先级顺序为:内联式>内嵌式>外部式
CSS选择器的优先级顺序是:
!important>内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器
具体计算层⾯中,优先级由ABCD的值来确定,值计算规则如下:。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
a)元素选择器 应用于所有对应的html标签,css中直接使用 html元素标记 如:div{display:none;} <div></div><div></div>
b)伪元素选择器 :first-letter - 首字母样式 :first-line - 首行样式
5.通配符选择器
应用于所有匹配的样式,类似模糊匹配,*号 就是什么都可以啦。 如:div *{ display:none; } <div><div></div><span></span></div>
CSS样式应用优先级关系
[1位重要标志位] > [4位特殊性标志] > 声明先后顺序
①重要声明(!important)
div{ color:blue !important; color:green; }
虽然按照顺序应该是使用后声明的绿色,但 是因为!important的缘故,所以最后使用的 却是蓝色。
3.类(属性,伪类)选择器 a)类选择器 应用于对应class的元素,css中用“.”后跟 class名来标记。 如:header{display:none;} <div class=”header“></div>
b)属性选择器 属性选择器应用于对应class的元素,css中用 “[]”标记中html元素属性名来标记。 如:div[title]{ display:none; } <div title=”any”></div>
<div><p><span></span></p></div><span></s pan><div><em></em></div>
2.子(元素)选择器(chchild combinator) 大于前后的元素必须是父子关系。 如:div > span { display:none;
c)伪类选择器 LVHA伪类,样式按LVHA优先级顺序从右至左覆 盖。所以要注意一下这4个伪类的声明顺序, 不同的顺序会产生不同的效果。 a:link - 默认链接样式 a:visited - 已访问链接样式 a:hover - 鼠标悬停样式 a:active - 鼠标点击样式
4.元素(伪元素)选择器
}
<div><span></span></div><div><em><span>< /span></em></div>
3.相邻兄弟选择器(adjacentsibling selector) 相邻兄弟结合符(adjacentsibling combinator):加号 加号前后的元素必须是同级兄弟关系。
②正常声明
1.内联样式 在html文档的元素中直接插入样式的 如:<div style=”display:none;”></div>
在ie6中此优先级与id选择器同级
2.id选择器
应用于对应id的元素,css中用“#”后跟id来标记。 如:#header{ display:none;} <div id=”header“></div>
如:li + li{
display:none;
}
<ol><li></li><li></li><li></li></ol>
❖事实上一般不会遇到太过复杂的情况, 按照我们常用的简单地来记就是:
❖!important > 内联定义 > id > class > 元素 > 复合结构(无定义复合>父子复合>兄 弟复合)
6.继承样式和结合符
a)继承样式 p会继承div设置的样式,但没有权重,任何 方式给p定义的样式都可以轻易覆盖继承样式 如:div{color:red;} <div><p></p></div>
b)结合符(combinator) 1.后代选择器(descendant selector/上下文 选择器contextual selector) 后代结合符(descendant combinator):空 格 空格前后的元素是后代关系。 树结构的分支选择器。 (可一直嵌套下去,如:div p span) 如:div span{ display:none; }
相关文档
最新文档