下载文档原格式
常见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（层叠样式表）是一种用于描述HTML或XML（包括如SVG，MathML等衍生技术）文档样式的计算机语言。
思源笔记使用CSS来定义其界面和主题的样式。
思源笔记的CSS基础选择器包括标签选择器、类选择器、多类名选择器和ID选择器。
这些选择器可以用来选择和修改不同的元素。
字体属性也是CSS的重要部分，包括字体系列、字体大小、字体粗细和字体倾斜等。
这些属性可以用来控制文本的外观。
如果你想修改思源笔记的CSS，需要遵循一定的步骤。
首先，你需要打开思源笔记的开发者工具，然后选中你想修改的元素。
接着，你可以在CSS文件中修改对应的样式。
最后，保存CSS文件并查看修改是否生效。
需要注意的是，修改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样式规则选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}CSS代码结构中的特点CSS样式中的选择器严格区分⼤⼩写，属性和值不区分⼤⼩写，按照书写习惯⼀般将“选择器、属性和值”都采⽤⼩写的⽅式。
多个属性之间必须⽤英⽂状态下的分号隔开，最后⼀个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英⽂状态下的引号。
在编写CSS代码时，为了提⾼代码的可读性，通常会加上CSS注释。
在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可⽆。
属性和属性值之间不允许出现空格，否则浏览器会报错引⼊CSS样式表优先级：如果三种样式同时控制我们的内容：⾏内优先级最⾼外部样式，内部样式：谁离着内容近，谁优先级⾼1、⾏内式⾏内式也称为内联样式，是通过标记的style属性来设置元素的样式<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>style是标记的属性，实际上任何HTML标记都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标记及嵌套在其中的⼦标记起作⽤。
2、内嵌式内嵌式是将CSS代码集中写在HTML⽂档的<head>头部标记中，并且⽤<style>标记定义<style>标记定义，其基本语法格式如下：<head><style type="text/css">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head><style>标记⼀般位于<head>标记中<title>标记之后，也可以把他放在HTML⽂档的任何地⽅。
css style用法CSS（CascadingStyleSheets）是一种用于网页设计的样式表语言。
它可以控制HTML文档中的元素的外观和布局，使得网页设计更加美观、简洁、易于维护。
在本篇文章中，我们将探讨CSS style用法的基础知识和常见技巧。
基础知识CSS样式表由一系列的规则（rule）组成，每个规则包含一个选择器（selector）和一组声明（declaration）。
选择器用于指定要应用样式的HTML元素，声明则用于定义这些元素的样式。
例如，下面的CSS规则将为所有h1元素设置红色字体、黑色背景和20像素的上下内边距：```cssh1 {color: red;background-color: black;padding: 20px 0;}```在这个例子中，h1是选择器，color、background-color和padding是声明，它们用冒号（:）分隔开来，每个声明以分号（;）结尾。
需要注意的是，CSS规则是区分大小写的，因此h1和H1是不同的选择器。
选择器选择器是指定要应用样式的HTML元素的标识符。
下面是一些常见的选择器类型：1. 元素选择器（Element Selector）：通过HTML元素的名称来指定要应用样式的元素。
```cssp {color: blue;}```这个规则将为所有p元素设置蓝色字体。
2. ID选择器（ID Selector）：通过HTML元素的id属性来指定要应用样式的元素。
```css#header {background-color: gray;}```这个规则将为id为“header”的元素设置灰色背景。
3. 类选择器（Class Selector）：通过HTML元素的class属性来指定要应用样式的元素。
```css.highlight {font-weight: bold;}```这个规则将为所有class为“highlight”的元素设置粗体字。
CCS样式表⼩结CSS（Cascading Style Sheet，叠层样式表），作⽤是美化HTML⽹页。
/*注释区域*/ 此为注释语法⼀、样式表（⼀）样式表的分类1.内联样式表和HTML联合显⽰，控制精确，但是可重⽤性差，冗余较多。
例：<p style="font-size:14px;">内联样式表</p>2.内嵌样式表作为⼀个独⽴区域内嵌在⽹页⾥，必须写在head标签⾥⾯。
<style type="text/css">p //格式对p标签起作⽤{样式；}</style>3.外部样式表新建⼀个CSS⽂件，⽤来放置样式表。
如果要在HTML⽂件中调⽤样式表，需要在HTML⽂件中点右键→CSS样式表→附加样式表。
⼀般⽤link连接⽅式。
有些标签有默认的边距，⼀般写样式表代码的时候都会先去除（也可以设置其他的样式），如下：（⼆）选择器1.标签选择器。
⽤标签名做选择器。
2.class选择器。
都是以“.”开头。
3.ID选择器。
以“#”开头。
<div id="样式名">4.复合选择器（1）⽤“，”隔开，表⽰并列。
（2）⽤空格隔开，表⽰后代。
（3）筛选“.”。
⼆、样式属性（⼀）背景与前景1.背景：2.前景字体：（⼆）边界和边框border（表格边框、样式等）、margin（表外间距）。
padding（内容与单元格间距）。
（三）列表与⽅块width、height、（top、bottom、left、right）只有在绝对坐标情况下才有⽤。
链接的style：a:link 超链接被点前状态a:visited 超链接点击后状态a:hover 悬停在超链接时a:active 点击超链接时在定义这些状态时，有⼀个顺序l v h a。
div：division。理解为一个盆，里面可以放很多盘子。即
1、内联式样式表:在标签内部写样式代码。方便但不灵活
2、嵌入式样式表：一般在head标签内。以这种方式，可以控制
整个网页里的某个标签的样式
3、处部样式表：单独将样式定义成一个文件，然后在需要引用样式的文件内调
用样式文件。可供所有需要的文件引用，减少重复性工作
一般在head标签内写上：
src="style/aa.css">
4、输入样式表:在一个css文件中引入另一个css文件。比如：
在a.css文件中写上@import url(b.css); 表示在a.css文件中引入b.css
文件中的样式。
可以理解为级联引用
样式规则的选择器(大括号前面)：
一、html selector:直接在大括号前写html的标签。
格式 p {...}
p标签 的选择器样式应用
二、class selector:在标签中定义class属性（class的属性
值可以重复），然后在样式中引用class属性的值。
格式： p.one{...}
p.two{...}
aaaaaaaaaa
bbbbbbbbbbb
bbbbbbbbbbb
三、 id selector:在标签中定义id属性(每个标签都可以有
id属性，但一个页面中的id值必须唯一)，然后在样式中引用id属性的值。一般
应用于单位个标签中。
格式： #a{...}
#b{...}
#c{...}
#d{...}
aaaaaaaaa
bbbbbbbbb
ccccccccccc
dddddddd
四、关联选择器：说白了就是嵌套使用，用空格分开。也可
以延伸到class属性的嵌套。
格式： div p em{...} //最普通的标签嵌套方式
test biaoqian qiantao
格式： .one .two em{...} //(类选择器方式的关联
选择器)
test class qiaotao
当然，下面写义也可以(延伸到id属性的情况)
格式： #one .two em{...}
test
class qiaotao
五、组合选择器:大括号前写多种标签并以逗号隔开。
格式： p,div,a,h1,#two,.one{...} //多个标签以逗号隔
开
test1
六、伪元素选择器:对同一个标签的不同状态使用样式。如a
和p标签
格式： a:link{...} //链接状态
a:hover{...} //鼠标放上去状态
a:visited{...} //访问过的状态
百度
上述方式，会使所有的a标签的样式都一样。
如何做到不同的链接，样式不一样呢？用伪元素与类同时使
用的方法：
格式： a.one:link{...}
a.two:hover{...}
a.three:visited{...}
href="www.baidu.com">baidu.com
href="www.sina.com.cn">sina.com.cn
href="www.sohu.com">sohu.com
