CSS选择器优先级介绍

块元素和内联元素

块元素

块元素：所谓块元素就是独占一行的元素
例如：div p h1 h2 h3 ~

内联元素

内联元素（行内元素）：指只占用自身元素大小，不会占用一行
例如： a img span iframe

块元素主要用来页面布局 ；内联元素主要用来选中文本设置样式；

一般情况，只用块元素去包含内联元素，其中a元素可以包含任意元素，除了他本身；p元素中不能包含其他块元素；

选择器分类

本文介绍了几种常见的选择器及其优先级的规则

通配选择器

可以用它来选中页面中的所有元素
语法： *{ }

id选择器

通过元素的id属性值选中唯一的元素
语法： #id属性值 {}

类选择器

通过元素的class属性值选中一组元素
语法： .class属性值{}

元素选择器

p{
font-size:10px;
}
: first-letter 为p中第一个元素设置特殊格式
：last-line 为p的第一行设置格式
：before 表示元素最前面的部分
：after 表示元素最后面的部分
before、after 结合content一起使用，通过content向before和after位置添加一些内容；
例:
p:before { content: “我是元素最前面–奶奶的星星-史铁生”;
color:red; }

交集选择器

可以同时选中满足多选择器的元素
-语法：
选择器1选择器2选择器N{}

伪类选择器

伪类专门用来表示元素的一种状态；
比如访问过的超链接、没访问的超链接
：link 表示普通的链接（没放过的链接）
：visited 表示访问的链接
：hover 表示鼠标移入的状态
：active 表示超链接被点击的状态
：focus 表示文本框获取焦点以后，可修改背景颜色
例：
a：link{
color : green;
}

属性选择器

可以根据元素中的属性或者属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素
[属性名=“属性值”] 选取含有指定属性的元素
[属性名=^“属性值”] 选取含有指定内容开头的元素
[属性名=$“属性值”] 选取含有指定内容结尾的元素
[属性名=*“属性值”] 选取属性值包含指定内容的元素
例

我是一个段落

有德必有勇

p[title=“hello”]{
background-color: yellow;
}

子元素选择器

：first-child 可以选中第一个子元素；

p:first-child{
background-color: yellow;
} 为第一个p标签设置背景颜色为黄色

：last-child 可以选中最后一个子元素；
：nth-child 可以选中任意位置的子元素；（n 是一个正整数，另外可以指定一个参数even 或odd）even表示偶数位置的子元素，odd表示奇数位置的子元素；

p:nth-child(even){
background-color: greenyellow;
}

否定伪类

作用

可以从选中的元素中剔除某些元素
语法：
：not(选择器)
p:not(.hello){
background-color: lightpink;
}

样式继承

在css中，祖先元素上的样式，也会被它的后代元素继承，利用继承可以将一些基本样式设置给祖先元素，这样所有的后代元素将会自动继承这些元素；
但并不是所有样式都会被继承，比如：背景相关的样式不会被继承； 还有边框相关的样式~

优先级的规则

内联样式：1000
id选择器 ：100
类or伪类选择器 ：10
元素选择器： 1
通配选择器 ： 0
继承 ：没有优先级

当选择器中包含多种多种选择器时候，需要将多种选择器的优先级相加然后再比较；

• 但是注意，选择器的优先级计算不会超过最大的数量级；
• 如果选择器的优先级一样，则使用靠后的样式；