CSS 选择器优先级

o-h-

已于 2022-06-14 09:13:11 修改

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3 前端

于 2022-06-13 20:12:00 首次发布

本文链接：https://blog.csdn.net/m0_66983971/article/details/125266235

css 专栏收录该内容

20 篇文章

订阅专栏

css选择器优先级的判定规则：

权重之和，和越大，越优先，和一样，后者覆盖前者。！important（权重：无穷）>内联式（即行内样式）（1000）>id选择器（100）>类选择器、伪类选择器、属性选择器（10）>标签选择器和伪元素选择器;（1）>通用选择器、相邻兄弟选择器（+）、兄弟选择器（~）、子选择器（>）（0）>继承（了解）>默认（了解）
如下：
1、css 属性 !important

2、内联式（即行内样式）

<元素 style=" 属性:属性值; "></元素> // 权重1000

3、id选择器

#id名{ 属性:属性值;} // 权重100

4、类选择器、伪类选择器、属性选择器

.类名{ 属性:属性值;} // 权重10

元素:hover { 属性:属性值; }

input[type="text"]{ 属性:属性值; }
具体举例如：
input[type="text"]
{
    width:150px;
    background-color:yellow;
}

5、标签选择器和伪元素选择器;

标签 { 属性:属性值;} // 权重1

// 伪元素选择器：例如：
::after, ::before, ::fist-inline, ::selection等
::after { 属性:属性值; }

6、通用选择器、相邻兄弟选择器（+）、兄弟选择器（~）、子选择器（>）

*{ 属性:属性值;} // 权重0

 h1+p{ // 相邻兄弟选择器（+）
            color:red;
        }

  h1 ~ p{ //兄弟选择器（~）
        color:red;
    }

html > body table + ul {margin-top:20px;} //子选择器（>）