这里介绍的都是目前使用的主流选择器
标签选择器
标签选择器,此种选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中。
举例:
div{color:red}
......
<div>
啊啊啊啊·
</div> <!--
对应以上样式
-->
<div>div</div> <!--
对应以上样式
--> //
最终字体都为红
类选择器
通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可重叠用,是css中应用最多的一种选择器。
但是当多个效果重复时 权重大的效果优先
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
......
<div class="blue">....</div>
<h3 class="blue big box">....</h3>
<p class="blue box">....</p>
层级选择器
主要应用在标签嵌套的结构中,层级选择器,是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用,减少命名,同时也可以通过层级,限制样式的作用范围。
举例:
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con">
<span>....</span>
<a href="#" class="pink">....</a>
<a href="#" class="gold">...</a>
</div>
<span>....</span>
<a href="#" class="pink">....</a>
ID选择器
通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。
举例:
#box{color:red}
......
<p id="box">
这是一个段落标签
</p> <!--
对应以上一条样式,其它元素不允许应用此样式
-->
<p>
这是第二个段落标签
</p> <!--
无法应用以上样式,每个标签只能有唯一的
id
名
-->
<p>
这是第三个段落标签
</p> <!--
无法应用以上样式,每个标签只能有唯一的
id
名
-->
组选择器
多个选择器,如果有同样的样式设置,可以使用组选择器。 举例:
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>