在之前的文章中,我们知道对于繁杂的网页内容,我们可以通过引用内部样式来完成集体修改。
如
p {
font-size:20px
}
这其实涉及到了 “标签选择器” 的概念即统一选择 标签 进行样式引入。
除了选择标签,我们还可以使用其他选择器
|类选择器|
当我们在标签内部用 “class” 属性来定义,那么这个标签就会归为这一 “class” 类。
如:
<p class="类名">小虫</p>
当然,一个标签可以属于多个类,不同类之间用空格隔开,且层叠性(优先级)是依据CSS中类的前后而不是标签的类定义前后。
此时我们在内(外)部样式处写上 |”.”+类名| 即可选择类 如:
.fireinsect {
font-size:20px
}
同理,以此方法使用 “id” 属性来选择叫 id选择器
不过 “id选择器” 需要添加的是 “#” 而不是 “.” 如:
#fireinsect {
font-size:20px
}
在网页制作中,我们常常会遇到各种标签的嵌套的嵌套,此时我们不免就会需要特点标签内引入样式,因而我们就需要高级选择器。
后代选择器:
标签内嵌套标签时使用,如:
<li><p>测试</p></li>
时我们可以在CSS中以 |”父级”+空格+”子级”| 方式来选择 如:
li p {
font-size:20px
}
交集选择器:
当我们需要选取某一标签内,类名为xxx的标签,即可使用 交集选择器
方法:|”标签名”+”.”+”类名”|
p.fireinsect{
font-size:20px
}
子选择器:
|”父标签”+”>”+”子标签”|
li>p {
font-size:20px
}
子选择器与后代选择器相似,却在选取范围有所不同,子选择器重在”子”即前后标签必须是明确的父子关系,而后代选择器则重在后代,即前后标签只要是前后关系即可,例子如下:
同样的HTML:
<p><span>Span 1. 在p标签内 <span>Span 2. 在p标签的span标签内</span>
</span> </p>
<span>Span 3. 与p标签相邻</span>
并集选择器:
如果给不同标签,或者不同类名的标签引入同一样式,可以使用并集选择器
即不同标签之间用 ","隔开 如:
.box,p,h3,.phone{}
选择器的优先级:Id选择器 > 类选择器 > 标签选择器
而高级选择器的优先级取决于权重,即假设:标签选择器权重为1,类选择器权重为10,Id选择器权重为100,高级选择器权重为其囊括的权重相加(两个高级选择器优先级对比的前提是选择有交集)