【总有一些东西要弄清】——说说面试时一系列的CSS问题
仅以此篇缅怀那些笔试100次,问100次的CSS问题。
问:
CSS选择符有哪些?哪些属性可以继承?优先级?内联和important哪个优先级高?
选择符
1 | 通配选择符(*) | 表示页面内所有元素的样式 | *{font-size:12px;margin:0;padding:0;} |
2 | 类型选择符(body、div、p、span等) | 网页中已有的标签类型作为名称的选择符 | div{width:10px;height:10px;} |
3 | 群组选择符(,) | 对一组对象同时进行相同的样式指派 | a:link,a:visited{color:#fff;} |
4 | 层次选择符(空格) | 包含选择符对某对象中的子对象进行样式指派 | #header top{width:100px;} |
5 | id选择符(#) | id选择符具有唯一性,在页面中不能重复使用 | #header{width:300px;} |
6 | class选择符(.) | 可以在页面中重复使用 | .title{width:300px;} |
7 | IEhack选择符(_、*、\0、\9\0;) | 兼容不同的浏览器 | .title{_width:50px;*height:30px;} |
可继承的属性
azimuth, border-collapse, border-spacing, //红色为常用的 caption-side, color, cursor, direction, elevation, empty-cells, font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, orphans, pitch-range, pitch, quotes, richness, speak-header, speaknumeral, speak-punctuation, speak, speechrate, stress, text-align, text-indent, texttransform, visibility, voice-family, volume, whitespace, widows, word-spacing
优先级的四大原则
原则1:继承没指定的牛B
demo1:
<style type="text/css"> *{font-size:20px} .class3{ font-size: 12px; } </style> <span class="class3">我是多大字号?</span> <!-- 运行结果:.class3{ font-size: 12px; }-->
demo2:
<style type="text/css"> #id1 #id2{font-size:20px} .class3{font-size:12px} </style> <div id="id1" class="class1"> <p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p> </div> <!--运行结果:.class3{ font-size: 12px; }-->
原则2:#ID > .class > 标签
demo1:
<style type="text/css"> #id3 { font-size: 25px; } .class3{ font-size: 18px; } span{font-size:12px} </style> <span id="id3" class="class3">我是多大字号?</span> <!--运行结果:#id3 { font-size: 25px; }-->
原则3:越具体越牛B
demo1:
<style type="text/css"> .class1 .class2 .class3{font-size: 25px;} .class2 .class3{font-size:18px} .class3 { font-size: 12px; } </style> <div class="class1"> <p class="class2"> <span class="class3">我是多大字号?</span> </p> </div> <!--运行结果:.class1 .class2 .class3{font-size: 25px;}-->
原则4:标签#ID > 标签.class
demo1:
<style type="text/css"> span#id3{font-size:18px} #id3{font-size:12px} span.class3{font-size:18px} .class3{font-size:12px} </style><span id="id3">我是多大字号?</span> <span class="class3">我是多大字号?</span> <!--运行结果:span#id3{font-size:18px} | span.class3{font-size:18px}-->
最后:当原则之前冲突的时候,原则1 > 原则2 > 原则3 > 原则4
!important
IE6到底认不认识!important???
答:认识,但是有一个小bug。
例如:
<style> #ida {size:18px} .classb { font-size: 12px; } </style><div id=“ida” class=“classb”>!important测试:18px</div>
加入!important
<style> #ida{font-size:18px} .classb{ font-size: 12px !important; } </style><div id=“ida” class=“classb”>!important测试:12px</div>
IE6 BUG:
<style> .classb{ font-size: 18px !important; font-size: 12px } </style><div class=“classA”>!important测试:12px</div>
原因和办法:
这里在ie6下是12像素的字,而其他浏览器下是18px的字。
但是当我们把样式改一下,!important放在后面,即.classb{ font-size: 12px;font-size: 18px !important; },那么ie6下和其他浏览器一样也是18px的字。
转载于:https://www.cnblogs.com/ccto/archive/2013/03/19/2970309.html
【总有一些东西要弄清】——说说面试时一系列的CSS问题相关推荐
- 面试时总有恐惧感要如何有效消除呢
在刚出社会的时候,对于社会上的很多事物都不了解,更没有经验,所以在面试的时候,会有一定的紧张是正常的.其实也有很多的历届生也不能完全的客服自己的恐惧感.下面高校人才网就和大家分享面试时总有恐惧感要如何 ...
- 技术面试时,程序员需要什么样的编程测试?
良好的招聘流程抵万金,本文中就来和你探讨下如何设计招聘流程,以及聪明的雇主应该避免哪些做法. 作者 | Mike Hearn 译者 | 弯月,责编 | 郭芮 出品 | CSDN(ID:CSDNnews ...
- 面试时应该如何进行自我介绍呢
面试时应该如何进行自我介绍呢?下面就给大家讲解一下. 在面试时,我们经常会被要求自我介绍,所谓自我介绍,就是把自己介绍给出别人,以使别人认识自已,所以恰到好处的自我介绍,可以大大提高面试的好感. 1. ...
- 面试时自我介绍最强参考卷
面试经验介绍:自我介绍合集篇 面试时如何自我介绍 面试时,我们会面对形形色色的问题,而最令人哑口无言的,往往是一些最简单和最常见的题目,比如"请你自我介绍一下".大多数应征者的反应 ...
- 面试时算法为什么如此重要?高薪,外企,为什么迟迟没有进入?
为什么明明面试题比工作遇到的算法已经简单那么多,面试的时候面一下算法还是让很多人义愤填膺呢? 收藏人:木立 2014-03-22 | 阅:639 转:0 | 来源 | 分享 13 ...
- 面试时,HR想坑我,没想到我社会经验这么足,竟然.....
一提到面试,我想很多人都有聊不完的话题,刚好我最近在找工作,碰到了很多面试的坑,今天分享出来,以下只是本人微小的灼见,望大家海涵. 现在科技这么发达,好多人都在网上开始投简历,合适的线下约,以下面试常 ...
- 面试时应该如何应答?
精选面试问题100句 在面试的过程中,虽然没有人能够在面试前知道聘方会提出的每个问题,但是实现对一些可能会提到的问题有一个较为充分的准备还是十分必要的.下面是企业在面试中经常会被提问到的问题,你要做的 ...
- 【面试】面试时项目亮点怎样回答才满分?
作者:磐冲 原文地址:https://segmentfault.com/a/1190000022795484 这篇作为之前一篇文章的延续,以及对过去3个月我模拟面试过的30多位同学的面试情况总结,我们 ...
- 面试时项目亮点怎样回答才满分?
点击上方"前端技术江湖",选择"置顶或者星标" 你的关注意义重大! 作者:磐冲 原文地址:https://segmentfault.com/a/11900000 ...
最新文章
- Python构建lassocv模型并输出Rad-score公式
- 思略特报告解读:智能制造企业如何实现数字化?
- 为敏捷 BI 补上关键两环
- 更换XP SN的vbs
- python中的数据写入与添加数据写入文件(to_csv)
- Android 屏幕滑动事件
- json文件示例_Spark SQL - JSON数据集
- phpmyadmin设置登录密码的几种方法
- python中异常和错误是一个概念_Python的异常概念介绍以及处理
- mysql断电同步不起作用_mysql主从同步因断电产生的不能同步问题
- oracle创建多个游标,Oracle——游标的创建和使用
- linux time函数_Linux基础知识(三)
- 谁为“上班玩耍”买单
- 恶意广告活动利用 WebKit 0day 实施欺诈
- liunxs运维_Linux运维工程师必备(命令)
- JAVA 基础(0)教学视频的选择和笔记本的选择
- 生物信息学软件_高通量测序技术|生信的发展,常用数据格式及分析软件
- ThinkPad Tablet2升级Windows10(各种故障及解决方案)
- 带阵列卡的服务器如何装系统,带阵列卡的服务器能不能做ghost
- qt删除键值_Qt QMap键值对基本用法(键值对)
热门文章
- linux nginx 重启_Nginx 的介绍及安装
- lime 深度学习_用LIME解释机器学习预测并建立信任
- Xilinx Vivado的使用详细介绍(2):综合、实现、管脚分配、时钟设置、烧写
- android 视频开发sd卡,Android开发之SD卡文件操作分析
- ads s参数拟合_ADS S参数仿真介绍
- python中timedelta_Python – 使用时间戳,timedelta的日期和时间比较
- python判断几个数最大最小_python 找出list中最大或者最小几个数的索引方法
- bochs上网镜像怎么上网_【干货科普】上网慢!经常掉线!怎么办?
- python搭建分布式集群_Spark完全分布式集群搭建【Spark2.4.4+Hadoop3.2.1】
- 西门子plm_西门子的Teamcenter、TIA Portal、NX MCD是如何结合在一起的