很古老的话题了
id=100
class=10
tag(标签)=1
按照这个规律去计算,比如
#qietu div{}
100+1 = 101
.qietu .box{}
10+10=20
可以得出第一个的权重要比第二个要高。另外关于权重的扩展知识面,我推荐了解下BEM命名规则,这个观念很好,可以从侧面杜绝权重问题的产生,还有一个就是提高权重的方法 !important;
可以用css3中新增的选择器“[attribute=value]”来同时选中指定的属性的标签。
1、新建html文档,添加5个input标签,其中第一个和最后一个“type”属性的属性值为“text”:
2、在head标签和body标签之间添加style标签,添加代码“input[type=text]”,“input”指的是标签名,“type”指的是属性名,“text”指的是属性值,这个就会把所有属性名为“type”、属性值为“text”的input标签选中:
3、为被选择的标签设置背景色为红色,这时属性值为“text”的第一个标签和最后一个标签背景色都变成了红色:
css选择器加.是类选择器,选择与class属性相匹配的类名
1.第一从符号上来区分后代选择器:是用空格来分隔开来 例如<h1>一个<span>人</span>的战争</h1> 就是h1 span{}子代选择器:用特殊符号> 例如 h1>span{}
2.第二从用法上区分后代选择器html部分:<ul class="study"> <li>物理 <ul> <li>力学</li> <li>声学</li> <li>电磁学</li> </ul> </li> <li>数学 <ul> <li>微积分</li> <li>概率论</li> <li>博弈论</li> </ul> </li> </ul> css部分//使用子代选择器的效果.study >li{ border:1px solid red;/*只给物理和数学加一个红色方框*/}//使用后代选择器的效果.study li{ border:1px solid red;/*给物理 力学 声学 电磁学 和数学 微积分 概率论博弈论都加一个红色方框*/}这说明子代是他是单传只给物理和数学就断子绝孙,后代是一代传一代。
子代选择器时效果图:
后代选择器时效果图:
Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有 粤ICP备16019765号
广州京杭网络科技有限公司 版权所有