0

0

css继承和层叠的详解

高洛峰

高洛峰

发布时间:2017-03-04 16:51:05

|

1470人浏览过

|

来源于php中文网

原创

在前面介绍了如何利用文档结构和css选择器为元素应用各种丰富的样式,今天来好好聊聊css的层叠和继承,先说说概念。

继承:一个元素向其后代元素传递属性值所采用的机制,说的通俗点,就是元素的某些属性可以通过继承从而传递给子元素的。

如:

测试继承这里不是span中的内容

p{color:red},这里便会看到p元素和审判元素中的文字都变为红色,因为p元素的属性被span继承过来了。但是有的属性是无法通过继承来传递的,
如border就不会通过继承获得。其实继承很好理解,但要配合层叠来一起理解。

立即学习前端免费学习笔记(深入)”;

层叠:确定一个元素究竟该用哪些样式时,就需要把继承和声明的特殊性拿来一起考虑,从而该启用哪一个css样式,这个过程就被称为层叠。

上面提到了特殊性,那我们就来重点看看。

先抛出一个问题,下面2对规则,哪条会获胜?

h1{color:red}
body h1{color:blue}

h2{color:red}
h2.color{color:green}

上面的2对规则中,显然只能有一个胜出,然而哪个该胜出嘞?答案就在每个选择器的特殊性。

android界面布局详解 中文WORD版
android界面布局详解 中文WORD版

本文档主要讲述的是android界面布局详解;在通过“Hello World!”介绍Android中的布局问题之前,不得不先介绍一下Android中的用户界面,因为布局问题也是用户界面问题之一。在一个Android应用程序中,用户界面通过View和ViewGroup对象构建。Android中有很多种Views和ViewGroups,他们都继承自View类。View对象是Android平台上表示用户界面的基本单元。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过

下载

一个选择器的具体特殊性如下:
1.对于规则中给定的每个ID属性值,特殊性加0,1,0,0
2.对于规则中每个类选择符合属性选择符以及伪类,特殊性加0,0,1,0
3.对于规则中每个元素和伪元素,特殊性0,0,0,1
4.结合符和通配符对特殊性没有任何贡献。
5.内联样式的特殊性加1,0,0,0
6.继承的属性没有特殊性,甚至连0特殊性都没有,所以要低于通配符的。
7.!important总会胜出。

所以对于上面的两组规则就有了结果:

h1{color:red}                0,0,0,1
body h1{color:blue}          0,0,0,2

h2{color:red}                0,0,0,1
h2.color{color:green}        0,0,1,0
所以red和green会生效。

于是,层叠的规则如下:

1.找出你代码里面所有的选择符。

2.规则的显示权重排序和起源排序,标记!important的样式最优先,且有三种起源:制作者,读者,用户代理。

3.元素声明的特殊性排序。

4.元素声明的出现顺序排序。


 更多css继承和层叠的详解相关文章请关注PHP中文网!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

32

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

23

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

16

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

5

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

6

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

268

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

195

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

170

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

85

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Go语言教程-全程干货无废话
Go语言教程-全程干货无废话

共100课时 | 10.1万人学习

前端基础进阶-移动Web
前端基础进阶-移动Web

共187课时 | 21.8万人学习

JavaScript设计模式完整视频教程
JavaScript设计模式完整视频教程

共60课时 | 12.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号