本帖最后由 长沙-小知姐姐 于 2017-12-22 11:20 编辑
今天给大家整理分享关于css选择器的3个知识点，喜欢的可以收藏一下。
1.常用的CSS选择器 1.1 标签选择器，用html标签申明，如：
/*标签选择器*/
p{
color: red;
}
1.2 类选择器，用一个样式类名申明，如：
/*类选择器*/
.content{
color: red;
}
1.3 id 选择器，用 DOM 的 id 申明，如：
/*id选择器*/
#content{
color: red;
}
1.4 属性选择器，用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，如：
<div title="content">this is content</div>
<style>
/*属性选择器*/
[title=content]{
color: red;
}
</style>
除了前 3 种基本选择器，还有一些扩展选择器，最常用的有：
1.5 后代选择器，利用空格间隔，比如：
<div>
<p>后代选择器</p>
</div>
<style>
/*后代选择器*/
div p{
color: red;
}
</style>
1.6 群组选择器，利用逗号间隔，比如：
<div>群组选择器</div>
<span>群组选择器</span>
<p>群组选择器</p>
<style>
/*群组选择器*/
div,span,p{
color: red;
}
</style>
当然还有很多其他的选择器，包括子元素选择器，相邻兄弟选择器等等。
2.优先级
基本原则： 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
计算方法： 我们用 1 表示标签选择器的优先级，用 10 表示类选择器的优先级，用 100 标示 ID 选择器的优先级
#content .para p
/*优先级值：100+10+1 = 111*/
div#content p
/*优先级值：1+100+1 = 102*/
div.content p
/*优先级值：1+10+1 = 12*/
div p
/*优先级值：1+1 = 2*/
3.定义顺序
看下列代码，请问<div>标签内的文字是什么颜色的？
<style>
.red{
color: red;
}
.blue{
color: blue;
}
</style>
<div class="blue red">请问字体是什么颜色？</div>
答案：
需要了解更多的学习资源可以加 小知QQ：2832281573 
回个 贴，加个QQ，美滋滋！ 
【长沙校区班级活动贴】
长沙黑马“和尚庙”的放飞下山之路
相约尖山湖，放飞程序梦——记前端8期第一次班级活动
黑马相会忆古人，共度七夕看七期
【长沙校区最新就业信息贴】
JavaEE4期 毕业当天，就业率70.37%，平均薪水787...
前端5期 毕业54天, 就业率80.5%，就业29人 , 平均薪...
JavaEE3期毕业22天，就业率94.44%，平均薪水9029....
前端6期 毕业0个工作日，就业率69.36%，平均...
| 
收藏
淘帖
踩
