您的位置:博客首页 >> 程序源码 >> CSS选择符权重

CSS选择符权重

日志编号:198 发表时间: 2015-05-04 23:31:52 关注次数:2302
html标签权重为1,class权重为10,id的权重为100。一般不需要做加法去算结果,估摸着只有下面这种情况才需要算一下(同级需要不同效果,比如段落文字不同效果,id和class混用,一般书籍都会使用诸如<p id="test">这是一段文字,<span>绿色</span>和<span class="red">红色</span></p>作为例子):

例一:
以下为代码内容,请直接复制粘贴:
<style type="text/css">
#page_tabs a{border:1px solid #f00;color:#f00} /*100+1*/

#page_tabs a:hover{border:1px solid #d2d2d2;margin-top:1px;color:#00f} /*100+1*/

.page_tabs_now{border:1px solid #d2d2d2;margin-top:1px;color:#0f0} /*10*/


</style>
<p id="page_tabs">
<a id="test1" class="page_tabs_now">标签1</a>  <a id="test2">标签2</a>  <a id="test2">标签3</a></p>

此例中,欲达到标签1为绿色字体效果,则需要采用子选择器增加标签1的权重:
#page_tabs .page_tabs_now{border:1px solid #d2d2d2;margin-top:1px;color:#0f0} /*100+10*/
如果你不喜欢使用子选择器,那就需要使每个a都采用class来代替a{}标签定义。

例二:
以下为代码内容,请直接复制粘贴:
<section id="login">
<input type="password" name="password" placeholder="请输入密码"/>
<input name="submit" id="login_submit" value=" 登 录 " type="submit"/>
</section>

#login input{border: 1px solid #678EC6;width:90%} /*100+100*/

#login_submit{width:70px; } /*100*/

此例为常用表单样式。手机浏览器中,输入框可随手机屏幕宽度缩放,比如为90%,但是,表单按钮却不需要缩放,设置固定宽度即可。根据权重,代码中width:70px并不能生效,因此,可以改为使用class替代#login input或#login #login_submit{width:70px; }使之权重也为100+100
本站不提供讨论功能。
本站所有非新闻类文章均为原创,且禁止转载。
本站为了获得更多流量赚取广告费,难免会有以次充好的文章,望见谅,勿鄙视。