css选择器

css权重由高到低分别是 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式 作为style属性写在元素标签上的内联样式 id选择器 类选择器 伪类选择器 属性选择器 标签选择器 通配符选择器 浏览器自定义 计算 从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1。 例如： *{} ====》0 li{} ====》1(一个元素) li:first-line{} ====》2(一个元素，一个伪元素) ul li {} ====》2（两个元素） ul ol+li{} ====》3（三个元素） h1+ *[rel=up]{} ====》11（一个属性选择器，一个元素） ul ol li.red{} ====》13（一个类，三个元素） li.red.level{} ====》21（两个类，一个元素） style="" ====》1000(一个行内样式) p {} ====》1（一个元素） div p {} ====》2（两个元素） .sith {} ====》10（一个类） div p.sith{} ====》12（一个类，两个元素） #sith{} ====》100（一个ID选择器） body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器，个类

选择器 * { width:1000px; } // 通用选择器 .img { width: 180px;} // 类选择器 img[alt="img"] { width: 400px; } //属性选择器 img:hover { width: 500px;} // 伪类选择器 #img { width: 300px;} //ID 选择器 css权重　 选择器 权重 行内样式 1000 id 100 类 10 元素，伪元素 1 继承 0.5 !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 ！important !important允许开发人员强制应用某样式，他的用法是写在该样式的某属性值后，结束分号前，以便强制应用该样式 来源： https://www.cnblogs.com/chengmingxiaowu/p/7843622.html

一、选择器类型 　　 1、ID　　#id 　　 2、class　　.class 　　 3、标签　　p 　　4、通用　　* 　　5、属性　　[type="text"] 　　6、伪类　　：hover 　　7、伪元素　　::first-line 　　8、子选择器、相邻选择器 二、权重计算规则 第一等：代表内联样式，如: style=””，权值为1000。 第二等：代表ID选择器，如：#content，权值为0100。 第三等：代表 类，伪类和属性 选择器，如.content，权值为0010。 第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。 三、比较规则 1,0,0,0 > 0,99,99,99， 也就是说从左往右逐个等级比较，前一等级相等才往后比 1， 0 ， 0， 0 0, 99 ， 99 ， 99 !important 的作用是提升优先级， 加了这句的样式的优先级是最高的 -------references------------------------------ https://www.cnblogs.com/dq-Leung/p/4213375.html 来源： https://www.cnblogs.com/zyjzz/p/10380729.html

选择器类型 1、ID　　#id 2、class　　.class 3、标签　　p 4、通用　　* 5、属性　　[type="text"] 6、伪类　　：hover 7、伪元素　　::first-line 8、子选择器、相邻选择器 三、权重计算规则 1. 第一等：代表内联样式，如: style=””，权值为1000。 2. 第二等：代表ID选择器，如：#content，权值为0100。 3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。 4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。 5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 6. 继承的样式没有权值。 --------------------- 作者：小胖梅 来源：CSDN 原文：https://blog.csdn.net/xm1037782843/article/details/80708533 版权声明：本文为博主原创文章，转载请附上博文链接！ 来源： https://www.cnblogs.com/wuwangxiaochou/p/10856655.html

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优先级

注：本文非原创，转自： http://www.cnblogs.com/zxjwlh 继承： 即子类元素继承父类的样式; 优先级： 是指不同类别样式的权重比较; 层叠： 是说当数量相同时，通过层叠(后者覆盖前者)的样式。 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三大特性—— 继承、 优先级和层叠。 继承： 即子类元素继承父类的样式; 优先级： 是指不同类别样式的权重比较; 层叠： 是说当数量相同时，通过层叠(后者覆盖前者)的样式。 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优先级

原文：https://www.cnblogs.com/zxjwlh/p/6213239.html 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 ,带大于号>) 　

引入css方式（重点掌握） 1、行内样式 <div> <p style="color: green">我是一个段落</p></div> 在标签内添加一个style属性，属性值为要设置的样式：样式的值。 2、内接样式 <style type="text/css"> /*写我们的css代码*/ span{ color: yellow; }​</style> 3、外接样式 3.1 链接式 <link rel="stylesheet" href="./index.css"> 3.1 导入式 <style type="text/css"> @import url('./index.css');</style> css的选择器： ​ 1.基本选择器 ​ 2.高级选择器 CSS选择器 基本选择器 基本选择器包括： 标签选择器 id选择器 类选择器 1.标签选择器 标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“ body{ color:gray; font-size: 12px;}/*标签选择器*/p{ color: red;font-size: 20px;}span{ color: yellow;} 2.id选择器 # 选中id 同一个页面中id不能重复。 任何的标签都可以设置id

引入css方式（重点掌握） 1、行内样式 <div> <p style="color: green">我是一个段落</p> </div> 在标签内添加一个style属性，属性值为要设置的样式：样式的值。 2、内接样式 <style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style> 3、外接样式 3.1 链接式 <link rel="stylesheet" href="./index.css"> 3.1 导入式 <style type="text/css"> @import url('./index.css'); </style> css的选择器： ​ 1.基本选择器 ​ 2.高级选择器 CSS选择器 基本选择器 基本选择器包括： 标签选择器 id选择器 类选择器 1.标签选择器 标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“ body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; } 2.id选择器 # 选中id 同一个页面中id不能重复。