Css选择器

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 >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>