Css共有四种基础选择器:
通配符 *
标签选择器
类选择器
ID选择器
优先级为:
ID选择器>类选择器>标签选择器>通配符
即各各选择器都指定自己的颜色,最终按优先级决定最终颜色或样式。
这四种选择器又可以组合成复杂点的选择器,如后代选择器,交集选择器
总之选择器的样式应用,是根据优先级决定,越精准的选择器优先级越高。
<style> *{ /*通配符:所有元素默认为该样式*/ color:blue; } p{ /*标签选择器:所有该标签都是用该样式*/ color:red; } .myClass{ /*类选择器:所有class为该类的都是用该样式,可出现任意次数*/ color:black } #myId{ /*ID选择器:ID属性为该值的使用该样式,只能出现一次*/ color:yellow; } .greenColor{ color:green; } p.greenColor{ color:pink; } div span{/*后代选择器:即选择div里的span*/ color:silver; } .a1{ font-size:30pt; } p.a1{/*交集选择器:p标签的有a1类的所有元素*/ font-size:10px; } </style> <h1>hello world</h1> <p>你好</p> <p class="myClass">张掖</p> <span id="myId">ChinaDaily Id选择器</span> <div>div内部<span>div里的span</span></div> <p>默认p为红色</p> <p class="a1">class="a1"的p</p> <font class="a1">class="a1"的font</font> <div class="greenColor a1">我使用了两个类的组合样式</div>