CSS基础三大特性和优先级_复合选择器p.father strong{}的权重为12-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42923903/article/details/120758142

本文详细介绍了CSS的三大特性：层叠性、继承性和复合选择器，包括层叠性的概念和原则，继承性的概念及应用场景，以及复合选择器中的后代选择器、子元素选择器、交集选择器、并集选择器和伪类选择器的详细说明。此外，还讲解了CSS的优先级计算，包括权重计算公式和权重叠加原则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本篇文章我们唠唠，CSS的三大特性和优先级，篇幅可能有点长，但是问题不大，话不多说，直接上车，出发~
在这里插入图片描述

css三大特性和优先级

一：层叠性

1.1：概念

css样式叠加了，看下面例子：

<style>
    div{
        color:red;
        font_size:18px
    }
    div{
        color:blue
    }
</style>
<body>
    <div>
        层叠性解释~
    </div>
</body>

注：上述案例最后的问题为“蓝色”，好好思考一下。

其实这就是层叠性，在设置同一个样式的时后，重复设置某一属性（比如上面：color），并且属性值不同的时候比如上面（red，blue），就会出现层叠

1.2：原则

1.样式冲突的话就选择最新声明的样式，或者说后定义的样式

2.样式不冲突的话则不会层叠

二：继承性

1.1: 概念

子标签会继承父标签的某些属性，如文本颜色和字号大小

<style>
    div{
        color:red;
        font_size:18px
    }
</style>
<body>
    <div>
        <p>
            继承性解释~
        </p>
    </div>
</body>

注，是不是以为例题里面的 “继承性解释” 还是黑色？其实已经是红色喽

为什么？因为这就是继承性，在父标签“div“中设置文本颜色样式，但是字标签”p”却生效了，这就是继承

2.2：原则

1，字标签如果未设置font，text，line包括color等可继承的属性，且它的父标签中设置了相应的属性，那么就会出现继承的情景

2，修行在个人，还需后续自己好好琢磨奥

三：复合选择器

因为之前的选择器只说了基本的几个（如：id，类，标签），所以这里先把选择器说完整（复合选择器）

3.1: 后代选择器

3.11：概念

后代，选择，顾名思义是用来选择后代的，接着看

3.12：语法

父级选择器 子级选择器{属性：属性值;属性2：属性值2...属性n:属性值n}

例：

.class h3{color:red;font-size:16px}

释义：定义 .class 这个类选择器所在的父级标签，下的 ”所有“ h3 这个标签选择器所在的 h3 标签的样式属性

3.2: 子元素选择器

3.21：概念

子元素，选择，顾名思义是选择子元素的，接下

3.22：语法

例：

.class>h3{color:red;font-size:14px}

这里对比上面的后代选择器来看，思考他们的不同之处

释义：定义.class 这个类选择器所在的父级标签，下的 “最近” h3 这个标签选择器所在的 h3 标签的样式属性

3.3：交集选择器

3.31：概念

顾名思义，肯定有相交的地方，那具体是什么呢？接下

3.32：语法

p.one{color:red;font-size：16px}

释义：选择段落标签，且类名为 one 的具体该段落标签

这里就不细说啦，用的真的很少

3.4：并集选择器

3.41：概念

这里不能顾名思义了，不好整，可以理解为，同时将多个选择器定义样式，说的很简单，但是明了不明了我就不知道了~

3.42：语法

.one,p,#test{color:red}

释义：这里大家应该就明白了很多，可以看到我上面杂七杂八的写了一堆选择器（类，标签，id），产生的结果就是，三个选择器所在的标签，文本颜色样式都会变成红色，所以，多用在集体声明一些相同样式的时候

3.5：伪类选择器

3.51：概念

用的较多的应该是链接的伪类，目前我所用到的是哈

3.52：语法

.fist a:link{color:black;font-size:16px;...}

是的呢，关键在于 a：（冒号）link

释义：设置所选 a 标签中超链接的初始颜色，跟文本的字体大小

3.53：对应

相应的还有，visited，hover，active

a:link  ---设置未访问时的链接的样式a:visited ---设置已经访问的链接的样式a:hover ---设置当鼠标移动到链接上时的链接样式a:active ----设置选定（就是鼠标长按时）的链接样式

3.54：顺序

写的时候注意顺序奥，搞错了就不生效了

顺序按照上面的就行，或者，link，hover，active，visited

总结：

总之，想要真正搞清楚，得自己慢慢体会，遇见各种问题，然后慢慢解决问题，才会越来越好

四：优先级

有时候，你明明设置某些属性了，却不生效，这是为什么呢？其实有概率是问题出在优先级上了

1.权重计算公式

行内样式的优先级大于内联样式（样式上一期的博客的说到过）

在内联式中公式可以理解为：

id选择器权重最大，你可以看做100
类选择器次之，可以看做10
标签选择器继续，为1
最后是继承的权重，为0

2.权重叠加

出现在使用交集选择器跟后代选择器的时候，这时候多个基础选择器同时出现，那么就会出现叠加的情况

div ul li ------- 权重为3
.nav ul li ------- 权重为12
a:hover --------权重为11
.nav a ------- 权重为11

明白了吧，直接用权重值相加即可

总结

本篇文章说了下CSS的特性和优先级，简约派代言的人的我说的并不多，希望能对你们有所帮助，有好的建议和知识我们评论区见~
我们顶峰相见

CSS基础 三大特性和优先级

文章目录

前言