标签:
p{color:red;}
页面所有的段落颜色都是红色。p.user{font-size:18px;}
意思是为class属性值为‘user’的段落标签p设置样式为文本尺寸18px;input[type="text"]{color:blue;}
意思是为属性值type为text的input标签设置文本颜色为蓝色;p span{color:purple;}
意思是选择p标签的所有span子元素并且为其设置颜色为purple。选择器的优先级可以归纳为以下三条规则:
#div1 li{
color:blue;
}
.content .list li{
color:red;
}
#div1{
color:red;
}
.content{
color:blue;
}
虽然.content后加载,但是ID的权重高于Class。#div1{
color:red;
}
span{
color:blue;
}
<div id="div1">
<span>span1</span>
</div>
虽然ID的权重高于Element的权重,但是ID是继承的样式,而Element(span)是设置的样式。
此外!important的优先级是最高的,*的优先级是最低的。
其实class和id的使用场景在规则中并没有给出规范,只是日常人们总结出来一些经验。
因为单纯的class选择器的范围太广泛,影响的标签太多,如果没有指定更具体的使用范围,引用时候就会出现很多意想不到的错误,比如本想修改div的字体大小,结果p因为样式需要引用的class也被修改了样式,如果是指定了这次修改是针对div的修改 div .style{font-size:16px;}
这样p的文本就不会被影响力。而且在团队协作时候,这种操作就越发的重要了。
/* 选择class属性值为header的标签 */
.header{
}
/* 选择class属性值为header的后代元素中class为logo的标签 */
.header .logo{
}
/* 选择同时具备class值为header和mobile的标签 */
.header.mobile{
}
/* 同时选择class值为header的后代p标签和class值为header的后代h3标签 */
.header p,.header h3{
}
/* 选择id值为header的后代元素中class值为nav的子元素li标签 */
#header .nav>li{
}
/* 选择id值为header的后代元素a的hover状态 */
#header a:hover{
}
俩者都可以选择标签,区别在于first-of-type表示所选标签的全部元素中的第一个,而first-child表示所选标签的父元素中所有子元素的第一个元素;
可以在网站caniuse查询。
标签:
原文地址:http://www.cnblogs.com/acorn/p/5260409.html