摘要：当两个规则的权值相同时，谁更具体用谁，也就是权值高的选择器作用的越具体优先级越高。
CSS选择器
1.id选择器 #id{ } ,“#id”选中元素
2.类选择器 .class{ } ,“.类名称”选中元素
3.标签选择器 div{ } ,“标签名”选中元素
4.通配符选择器 { } ,""选中所有元素
5.组合选择器：
分组选择器 E,F “，”逗号隔开，同时选中E,F元素
后代选择器 E F 空格隔开，选中E元素下的所有F元素（无论F元素嵌套多少层一样会被选中）
直接子选择器 E > F “>”隔开，选中E元素下的直接子元素F，即E元素下的第一层级子元素F
相邻兄弟选择器 E + F, “+”隔开选中E元素后的直接相邻元素F
通用相邻选择器 E ~ F, “~”隔开选中E元素后面的所有同级元素F
6.伪类选择器L-V-H-A,:link,:visited,:hover,:active
7.伪元素选择器
E::first-line 选中E元素内容的第一行
E::first-letter 选中E元素内容的第一个字母
E::before 在E元素之前插入conten内容
E::after 在E元素之后插入content内容
before和after是可以插入额外内容的位置，需要配合content属性使用
8.属性选择器
input[type="text"] {
width:150px;
}
css选择器优先级核心：每个选择器本身有优先级，作用范围越具体优先级越高。
CSS优先级从高到低分别是：
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
当CSS样式的规则由多个选择器组成时，id选择器的权值为1000，class选择器为100，标签选择器为10，按权值求和的记过高低决定哪个优先。当两个css规则的权值相同时，谁更具体用谁，也就是权值高的选择器作用的越具体优先级越高。当两个选择器规则和权值都是一样，后面样式会覆盖前面的！
div {color: #333;}
div {color: #666;}
这样div文案的颜色明显会是#666
id在页面上是唯一标识，class在页面上标识某一类型的样式，具有普遍性，可以重复使用。某元素的class名可以写成class="intro other"，即可以有多个class名，代表叠加两个类名称对应的样式。id名不能这样写。ID名常用在页面布局（标记大框架），class一般在局部页面布局中使用，用于样式定义，因为命名时可将class名称写成一样，所以只需要对该class写一次样式，就能让有相同样式的元素复用。使用CSS选择器时划定适当的命名空间,提高代码可读性，便于维护
选择器使用示例html
#header{} /*选中id为header的元素*/
.header{} /*选中class=header的元素*/
.header .logo{} /*选中class=header下的所有class=logo的元素*/
.header.mobile{} /*选中class="header mobile"的元素*/
.header p, .header h3{} /*选中class=header元素下的所有p元素，同时选中class=header元素下的所有h3元素*/
#header .nav>li{} /*选中id=header元素下的所有class=nav元素的直接子元素li*/
#header a:hover{} /*选中id=header元素下的所有a元素，并使用hover伪类*/
常见伪类选择器
【1】结构伪类选择器
E:first-child 选中E所在父元素下的第一个子元素，且该子元素是E元素
E:last-child 选中E所在父元素下的最后一个子元素，且该子元素是E元素
E:root 选中E所在根节点的元素，对于HTML即选中HTML元素
E:nth-child(n) 选中E所在父元素下的第n个子元素，且该子元素是E元素
E:nth-last-child(n) 选中E所在父元素下的倒数第n个子元素，且该子元素是E元素
E:nth-of-type(n) 选中E所在父元素下的同类型元素中的第n个E元素
E:nth-last-of-type(n) 选中E所在父元素下的同类型元素中的倒数第n个E个元素
E:first-of-type 选中E所在父元素下的同类型元素中的第一个E元素
E:last-of-type 选中E所在父元素下的同类型元素中的最后一个E元素
E:only-child匹配父元素内仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty匹配没有子元素的元素，且该元素无任何文本节点
E:not(F) 匹配不符合当前选择器的任何元素
【2】动态伪类选择器 顺序L-V-H-A
link-visited-hover-active
a:link{
color:red;
}
a:visited{
color:blue;
}
a:hover{
color:gree;
font-size:20px;
}
a:active{
color:gold;
}
a:focus{
color:gold; //a元素获得焦点后的样式
}
:first-child和:first-of-type的作用和区别
E:first-child 指定元素E，找其父元素下的第一个E元素
E：first-of-type 指定E类型的元素，找其父元素下的E类型元素的第一个
代码示例：
htmlaa
bb
ccc
.item1:first-child{color:red;}class=item1元素的父元素div下的第一个子元素item1字体红色bb
虽然class=item1但他们不是其父元素下的第一个子元素。,
ccc
.item1:first-of-type{background:blue;}class=item1元素的父元素下的同类型元素中的第一个class=item1的元素。
aa
的父元素div下的同类型元素（p,h3）分别选中第一个即aa,bb加蓝色背景。 text-align: center的作用设置元素内的文本水平居中对齐。text-align应用在块级元素上（div或p），对该块级元素（div/p）其内部的行内元素（文字、图片、input框）可设置对齐方式。
text-align有5个值：left/right/center/justify/inherit，左对齐/右对齐/居中对齐/两端对齐/继承父元素align值。justify两端对齐的时候，每行中的字间距可能不一致。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113353.html
摘要：为标记语言提供了一种样式描述，定义了其中元素的显示方式。选择器指明了中的样式的作用对象，也就是样式作用于网页中的哪些元素基本语法第一种选择器叫选择器在里面写一个，通过这个就能找到这个。一、CSS是什么？ 它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。...
一、语法规则 选择器{ 属性1:属性值1; 属性2:属性值2; ...... } /*注释*/ 二、如何在html中应用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夹和HTML位于同一个目录下） 2. 内部嵌入css /*css代码*/ 3...
一、语法规则 选择器{ 属性1:属性值1; 属性2:属性值2; ...... } /*注释*/ 二、如何在html中应用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夹和HTML位于同一个目录下） 2. 内部嵌入css /*css代码*/ 3...
阅读 4212·2021-09-26 10:11
阅读 2633·2021-07-28 00:37
阅读 3179·2019-08-29 15:29
阅读 1146·2019-08-29 15:23
阅读 3110·2019-08-26 18:37
阅读 2446·2019-08-26 10:37
阅读 574·2019-08-23 17:04
阅读 2328·2019-08-23 13:44
