发表于: 2018-05-22 00:46:52
2 558
今天完成的事情:
修复任务7bug ,
任务8导航栏调试bug,
菜单hover效果,
字体颜色,
处理入学,交费,自我介绍等相关事情 耗时较多,下午去万达广场,耽误了任务进度
明天计划的事情:
继续任务8
遇到的问题
# 按钮无鼠标
解决办法:cursor: pointer;
# 通过选择器设置 a标签颜色未能生效
解决方法:调试发现选择器级别不够,被覆盖,重新设置
# 菜单无法设置底部边框hover
解决方法:调试发现,导航栏Ul li 高度和导航栏高度不一样,增加高度为整个导航栏高度,再设置底部hover效果
收获
# 复习了css选择器优先级
优先级是如何计算的?
优先级就是分配给指定的CSS声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。
选择器类型 下面列表中,选择器类型的优先级是递增的:
类型选择器(type selectors)(例如, h1)和 伪元素(pseudo-elements)(例如, ::before)
类选择器(class selectors) (例如,.example),属性选择器(attributes selectors)(例如, [type="radio"]),伪类(pseudo-classes)(例如, :hover)
ID选择器(例如, #example)
通配选择符(universal selector)(*), 关系选择符(combinators) (+, >, ~, ' ') 和 否定伪类(negation pseudo-class)(:not()) 对优先级没有影响。(但是,在 :not() 内部声明的选择器是会影响优先级)。
给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ,因此可看作是具有最高的优先级。.
例外的 !important 规则
当在一个样式声明中使用一个!important 规则时,此声明将覆盖任何其他声明。虽然技术上!important与优先级无关,但它与它直接相关。
使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
一些经验法则:
一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important
永远不要在全站范围的 css 上使用 !important
永远不要在你的插件中使用 !important
取而代之,你可以:
更好地利用CSS级联属性 使用更具体的规则。在您选择的元素之前,增加一个或多个其他元素,使选择器变得更加具体,并获得更高的优先级。
什么的情况下可以使用 !important: A) 一种情况
你的网站上有一个设定了全站样式的CSS文件, 同时你(或是你同事)写了一些很差的内联样式。 在这种情况下,你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。
活生生的例子比如:一些写得很糟糕的 jQuery插件里面使用的内联样式。
B) 另一种情况
#someElement p { color: blue; } p.awesome { color: red; }
在外层有 #someElement 的情况下,你怎样能使 awesome 的段落变成红色呢?这种情况下,如果不使用 !important ,第一条规则永远比第二条的优先级更高
怎样覆盖 !important A)很简单,只需再添加一条 带!important 的CSS规则,要么给这个给选择器更高的优先级(添加一个标签,ID或类);或是添加一样选择器,把它的位置放在原有声明的后面(总之,最后定义一条规则比胜)。
一些拥有更高优先级的例子:
table td{ height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }
B)或者使用相同的选择器,但是置于已有的样式之后:
td { height: 50px !important; }
:not 伪类例外 :not 否定伪类在优先级计算中不会被看作是伪类. 事实上, 在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数.
评论