0

0

你必须要知道的CSS三大特性

php中世界最好的语言

php中世界最好的语言

发布时间:2018-03-13 10:32:00

|

2832人浏览过

|

来源于php中文网

原创

这次给大家带来你必须要知道的css三大特性,使用css三大特性的注意事项有哪些,下面就是实战案例,一起来看一下。

CSS三大特性 : 继承,层叠,优先级

一. 继承性

1.什么是继承性?

作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性

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

注意点:

1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承

2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承

3.继承性中的特殊性

3.1 a标签的文字颜色和下划线是不能继承的(也就是说 不能通过继承获得)

3.2 h标签的文字大小是不能继承的(也就是说 不能通过继承获得)

应用场景:

一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容;
body{}  >>>  一般在body里面设置共性信息

二. 层叠性

1.什么是层叠性?

作用: 层叠性就是CSS处理冲突的一种能力

注意点:

层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

CSS全称 Cascading StyleSheet  (层叠式样式表)

列如:


 

我是段落

三. 优先级

1.什么是优先级?

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

2.优先级判断的三种方式

2.1间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的

2.2相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

2.3不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠:

易想房产网YxHouse
易想房产网YxHouse

易想房产网,是易想团队自主研发的基于Asp.Net+SQL+三层结构的网上房产导购系统,具有智能化、高扩展、稳定、安全等特性,并拥有超强功能,可自由添加频道,后台智能修改风格,只要懂得网站常识的站长就可以轻松利用易想房产网建立起专业的大型房产资询门户网站,易想房产网有CMS增加频道功能,能够容易的把房产系统扩展成资讯网站多风格自由切换,发布楼盘,发布房源等功能,全站经过专业的优化处理,让你的网站在

下载

id>类>标签>通配符>继承>浏览器默认

id>类>标>通>继>浏

四. !important

1.什么是!important

作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高

注意点:

1.!important只能用于直接选中, 不能用于间接选中

2.通配符选择器选中的标签也是直接选中的,也可以用!important提升优先级

3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升

4.!important必须写在属性值得分号前面

5.!important前面的感叹号不能省略

 

五. 优先级的权重

1.什么是优先级的权重?

作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

2.权重的计算规则

2.1首先先计算选择器中有多少个id, id多的选择器优先级最高

2.2如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高

2.3如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高

2.4如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
也就是说优先级如果一样, 那么谁写在后面听谁的

注意点:

1). 只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的;

2). 通配符的权重为0

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

iOS webView怎样加载HTMLString

html5容易被忽略的小知识

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

4

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

1

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

1

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

16

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

18

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 25.1万人学习

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

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