【总有一些东西要弄清】——说说面试时一系列的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;}
5id选择符(#)id选择符具有唯一性,在页面中不能重复使用#header{width:300px;}
6class选择符(.)可以在页面中重复使用.title{width:300px;}
7IEhack选择符(_、*、\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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/259941.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试总结之html+css

最近面试了一些公司&#xff0c;和技术总监聊了一些前端技术方面的内容。回来之后我总结了一下&#xff0c;大致可以分为三个模块&#xff1a;第一、Html与css 方面&#xff1b;第二、浏览器解析方面&#xff1b;第三、js方面。打算&#xff0c;分为三篇博文&#xff0c;根据自…

k8s部署tomcat及web应用_k8s部署tomcat的yaml文件

1、k8s部署tomcat的yaml文件apiVersion: apps/v1kind: Deploymentmetadata:name: mytomcatspec:replicas: 5selector:matchLabels:app: mytomcatminReadySeconds: 1progressDeadlineSeconds: 60revisionHistoryLimit: 5strategy:type: RollingUpdaterollingUpdate:maxSurge: 1m…

计算机的发展经历阶段应用领域,计算机的发展阶段

计算机的发展阶段以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;计算机经历了四个发展阶段。1、电子管数字机(1946—1958年)硬件方面&#xff0c;逻辑元件采用的是真空电子管&#xff0c;外…

全球都对HTTPS抛出了橄榄枝,为什么?你又该怎么办?

2019独角兽企业重金招聘Python工程师标准>>> 互联网发展20多年&#xff0c;大家都习惯了在浏览器地址里输入HTTP格式的网址。但前两年&#xff0c;HTTPS逐渐取代HTTP&#xff0c;成为传输协议界的“新宠”。 早在2014年&#xff0c;由网际网路安全研究组织Internet …

jqGrid格式化日期

colModel列中属性 formatter:date, formatoptions:{srcformat: Y-m-d H:i:s, newformat: Y-m-d H:i:s}, 其它参数参考API转载于:https://www.cnblogs.com/GYoungBean/archive/2013/03/20/2970598.html

大一大学计算机考试难吗,新生必看!大一期间必考的3个证书,不考后悔,越拖越难考!...

原标题&#xff1a;新生必看!大一期间必考的3个证书&#xff0c;不考后悔&#xff0c;越拖越难考!9月开学季&#xff0c;大学新生也陆陆续续来到了学校报到&#xff0c;开启自己美好的大学生活!但是!小编要提醒大家的是千万不要相信高中老师说的那句&#xff1a;“上了大学你们…

我是如何实用:before :after

本文地址http://www.cnblogs.com/Bond/p/3972854.html 最近一直做移动端&#xff0c;没和IE6打交道了&#xff0c;瞬间感觉世界变美好了。移动端虽然还是各种坑&#xff0c;但是比起修复IE6那还是轻松多了&#xff0c;移动端很多效果可以用CSS3来做&#xff0c;感觉一切都和谐…

rockmq运维指令_RocketMQ运维监控

一个完善的消息中间件&#xff0c;监控是必不可少的功能。通过监控我们可以查看系统的运行情况&#xff0c;是否出现异常&#xff0c;是系统稳定性和运维的基础。1、监控平台搭建RocketMQ控制台需要自己去下载编译打包&#xff0c;可以在编译时设置其namesrvAddr和端口号&#…

Maven学习之 仓库镜像

使用仓库镜像 仓库可以声明在项目中&#xff0c;但有时&#xff0c;你可能想要使用某个仓库的镜像&#xff0c;而不去修改项目文件。 使用镜像的原因&#xff1a; 有一个同步镜像&#xff0c;且速度更快。想使用你自己控制的内部仓库。想运行repository manager来提供一个本地的…

谁看的最多

今天想到了昨天看到一道acm题目&#xff0c;难度入门级别。“谁看的最多”&#xff0c;题目大概是这样的&#xff1a;一队列的人3 2 1 6 4 5&#xff0c;数值的大小表示该人的高度。每个人只能看到前面比他高的人&#xff0c;如1可以看见2、3。但是&#xff0c;如果有人B比他高…

计算机与网络应用基础知识下上机考试,计算机应用基础知识考试

计算机应用基础课程是提高高职学生计算机文化水平的公共必须课&#xff0c;那么你对计算机应用基础知识了解多少呢?以下是由小编整理关于计算机应用基础知识试题的内容&#xff0c;希望大家喜欢!计算机应用基础知识试题1、计算机系统由硬件系统和软件系统两部分组成&#xff0…

分支-08. 高速公路超速处罚

按照规定&#xff0c;在高速公路上行使的机动车&#xff0c;超出本车道限速的10%则处200元罚款&#xff1b;若超出50%&#xff0c;就要吊销驾驶证。请编写程序根据车速和限速自动判别对该机动车的处理。 输入格式&#xff1a;输入在一行中给出2个正整数&#xff0c;分别对应车速…

lua 从一串数字中取出偶数位的数字_为什么JavaScript中 0.1 0.2 不等于0.3?

在 js 中进行数学的运算时&#xff0c;会出现0.10.20.300000000000000004的结果&#xff0c;一开始认为是浮点数的二进制存储导致的精度问题&#xff0c;但这似乎不能很好的解释为什么在同样的存储方式下0.30.40.7可以得到正确的结果。本文主要通过浮点数的二进制存储及运算&am…

zookeeper启动后没有相关进程

查看状态报错&#xff0c;报错&#xff0c;百度硕士nc问题&#xff0c;让看.out文件&#xff0c;但是这哥文件是空的&#xff0c;那就看log 016-12-15 14:08:19,355 [myid:] - INFO [main:QuorumPeer$QuorumServer149] - Resolved hostname: StandByNameNode to address: Stan…

html如何播放h264视频,浏览器 – 我如何播放H264视频?

嗯..从它的外观看起来它不像H264文件..通过MediaInfo运行它,我得到了这个&#xff1a;VideoFormat : AVCFormat/Info : Advanced Video CodecFormat profile : BaselineL2.0Format settings, CABAC : NoFormat settings, ReFrames : 1 frameWidth : 352 pixelsHeight : 288 pix…

ebs r12 -- adadmin: error while loading shared libraries: libclntsh.so.10.1

安装EBS R12.2增加中文字符集时&#xff0c;运行$AU_TOP/bin/adadmin出错&#xff1a; $ adadmin adadmin: error while loading shared libraries: libclntsh.so.10.1: cannot open shared object file: No such file or directory产因是没有配置应用管理用户的环境变量。 对.…

kingedit 上传php_php文件上传下载实例(实现最简单的网盘功能)

本人是一个新手代码狗&#xff0c;第一次发表博客&#xff0c;欢迎大大们指点&#xff01;最近手头有一个文件上传下载的案例&#xff0c;跟大家一起分享一下作为一个新手的苦逼成长历程&#xff01;话不多说&#xff0c;先上代码:一&#xff1a;这个是一个文件上传的html页面&…

Perl 面对对象的案例理解

晚上仔细的推敲了下大骆驼的案例&#xff0c;由于有段时间没继续看下去了&#xff0c;导致有些地方忘记了。 今天仔细的翻了下面对对象那块&#xff0c;说实话&#xff0c;认真看&#xff0c;用心看的话&#xff0c;就能看明白它写神码。 看完前面一堆的理论&#xff0c;发现一…

计算机发展与应用,网络计算机的发展与应用

网络计算机(Network Computer)&#xff0c;简称NC&#xff0c;是专用于高速网络环境下的一种计算机终端设备。它一般不需要硬盘、软驱及光驱等外部存储器&#xff0c;而是通过网络获取大部分资源&#xff0c;其所需要的应用程序和数据都存储在服务器上。NC与PC的比较随着网络技…

ASP.NET 缓存技术分析

缓存功能是大型网站设计一个很重要的部分。由数据库驱动的Web应用程序&#xff0c;如果需要改善其性能&#xff0c;最好的方法是使用缓存功能。可能的情况下尽量使用缓 存&#xff0c;从内存中返回数据的速度始终比去数据库查的速度快&#xff0c;因而可以大大提供应用程序的性…