前端css样式优先级问题
一、常用选择器
1.标签选择器(标签名{}），选中对应标签里的内容，例(div{})
2.类选择器（.类名{}），选中对应类名的内容，例（.one{}）
注：不可以数字开头，一个标签中可有多个类名
3.id选择器（#id{}），选中对应id的内容，例（#one{}）
注：不可以数字开头，一个标签里只能有一个id属性
4.通配符选择器（*{}），选中页面内所有标签
5.后代选择器（元素1 元素2 {}），选择元素1里中所有的元素2,例（ul li{}）
6.子元素选择器（元素1 > 元素2{}），选择元素1里所有直接后代元素2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav>a {
color: pink;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
</html>
此时只有第一个元素a会变色，二第二个元素a属于p元素的直接后代，不能被选中
7.并集选择器(元素1,元素2{}），同时选中多个元素，例（div,p{}）
8.伪类选择器
:visited 选取已被访问的链接
:link 选择未被访问的链接
:active 选择鼠标点击后的元素
:hover 选择鼠标移动到上面的元素
9.结构伪类选择器
:first-child 父元素中第一个子元素
:last-child 父元素中最后一个子元素
:nth-child(n) 父元素中第n个元素
:first-of-type 指定类型的第一个子元素
:last-of-type 指定类型的最后一个子元素
:nth-of-type(n) 指定类型的第n个元素
注:两者区别为上面的都是在所有元素中选择，下面的在同类别元素中选择
10.属性选择器
E[属性] 选中含有指定属性的元素E
E[属性="val"] 选中含有指定属性和切属性值=val的元素E
E[属性^="val"] 选中含有指定属性和val开头的元素E
E[属性$="val"] 选中含有指定属性和val结尾的元素E
E[属性*="val"值] 选中指定属性名和含有val的元素E
11.伪元素选择器
::first-letter 选择元素首个字母
:first-line 选择元素首行
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注：befor和after的使用必须配合content
二、选择器优先级
! important>内联(style)> ID选择器 > 类选择器 > 标签选择器>通配符选择器
三、优先级的计算
选择器的优先级是由 （A 、B、C、D） 的值来决定的
1.若有内联(style)，A=1
2.B= ID选择器 出现的次数
3.C的值= 类选择器 和 属性选择器 和 伪类选择器 出现的总次数
4.D的值= 标签选择器 和 伪元素选择器 出现的总次数
比较时，从左往右依次比较，权重大者优先级更高
<style>
li
{
color: red;
}
ul li
{
color: green;
}
.blue li
{
color: blue;
}
#pink li
{
color: pink;
}
</style>
第一个选择器权重为（0,0,0,1）
第二个选择器权重为（0,0,0,2）
第三个选择器权重为（0,0,1,1）
第四个选择器权重为（0,1,0,1）
所以最后会变成粉色
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/lgy422717070/article/details/138039761
浙公网安备 33010602011771号