首页 > 代码库 > CSS选择器-常用搜集

CSS选择器-常用搜集

标签选择器:

div{

font-size=10px;

color=red;

background-color=yello;

width=200px;

height=200px;

}

<div>前端威武</div>

---------------------------------------

类选择器:

.box{

 

}

<p class="box">啊啊啊啊</p>

------------------------------------------

ID选择器:

#box{

 

}

<p id="box">啊啊啊<p>

-------------------------------------------

通配符选择器

*{

}

<div>aa</div>

<p>aaa</p>

---------------------------------

复合选择器:两个或两个以上的选择器通过不同方式连接起来

div.box{//无空格

color:red;

}

<div class="box">哎哎</div>//这个div里的box变红色 

<p class="box">aaa<p>

<div>aaaaaa</div>

-------------------------------

后代选择器:有空格    无限制隔代  

选择器+空格+选择器.....{

 

}

.box san{

cocor:red;

}

<div class="box">

<p><span class="miss">aa</span></p>

</div>

----------------------------------

子代选择器:

div>span{

color;red;

}

<div>

<p><span></span></p>//这里的span是孙子 这里是p>span

<span></span> //直接的子标签变了就是这个

------------------------------------------------------------------------

并集选择器:

div,p,span{

font-size:100px;

}

<div>aaa</div>

<p>aaa</p>

<span>aaaa</span>

------------------------------------

选择器优先级:

一、什么是css优先级
css优先级,即是指CSS样式在浏览器中被解析的先后顺序。
二、css优先级规则
比较简单易记的一种方法就是给不同选择器分配不同的值:
1.id选择器默认优先级最高,其权值为100
2.class选择器、属性选择器和伪类选择器的权值为10
3.标签选择器的优先级较低,其权值为1
所以在比较样式的优先级时,只需统计选择符中的id、class、标签名个数,然后把对应的权值相加即可。根据结果便可得出优先级高低。
1.结果较大的优先级较高
2.结果相同,则后定义的样式优先级较高
3.如果样式值中含有!important,则该值优先级最高 

 

CSS选择器-常用搜集